/**
 * Titres portfolio — surcharge du core `structure/headings.css`.
 * Couleurs / tailles : design system `templates/custom/css/root.css` (--arkt-type-*, --arkt-text).
 * Prérequis : `root.css` déjà chargé (via `main.css`).
 */

/* Logo : typographie (couleur gérée par header.css — nav) */
#portfolio_page #hub-logo .hub-logo__mark--image {
  display: flex;
  font-size: var(--arkt-type-h1-size) !important;
  line-height: var(--arkt-type-h1-line) !important;
  font-weight: var(--arkt-type-h1-weight) !important;
  margin: 0 !important;
  padding: 0 !important;
}

#portfolio_page #hub-logo .hub-logo__mark--text {
  font-size: var(--arkt-type-h1-size) !important;
  line-height: var(--arkt-type-h1-line) !important;
  font-weight: var(--arkt-type-h1-weight) !important;
  margin: 0 !important;
  padding: 0 !important;
}

/*
 * Titres principaux de contenu (h1) — hors blocs TinyMCE.
 * Hors accueil (main sans .arkt-landing) : léger mélange accent + texte maquette.
 */
#portfolio_page main:not(.arkt-landing) #title-article h1,
#portfolio_page main:not(.arkt-landing) #about-content h1,
#portfolio_page main:not(.arkt-landing) #hero #title-star #title-about h1,
#portfolio_page main:not(.arkt-landing) #title-star #title-about h1,
#portfolio_page main:not(.arkt-landing) h1.limited-width,
#portfolio_page main:not(.arkt-landing)#about section article h1,
#portfolio_page main:not(.arkt-landing) #quatrecentquatre-elements h1,
#portfolio_page main:not(.arkt-landing) section#hero > div > h1,
#portfolio_page main:not(.arkt-landing) section#hero > div.full-width > h1 {
  font-size: var(--arkt-type-h1-size) !important;
  line-height: var(--arkt-type-h1-line) !important;
  font-weight: var(--arkt-type-h1-weight) !important;
  color: var(--arkt-type-h1-color) !important;
  display: block !important;
  padding: 0 !important;
}

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

/* Bloc « A propos » sur les fiches : nom du portfolio (hors accueil) */
#portfolio_page main:not(.arkt-landing) #about-content h2.about-card-title,
#portfolio_page main:not(.arkt-landing) #blog-about h2.about-card-title {
  font-size: var(--arkt-type-h2-size) !important;
  line-height: var(--arkt-type-h2-line) !important;
  font-weight: var(--arkt-type-h2-weight) !important;
  color: var(--arkt-type-h2-color) !important;
  margin-top: 0 !important;
}

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

/*
 * Accueil — hero (#title-home) et vedettes (.home-feature-vedette) :
 * repli sur les tokens titre du design system (surcharge possible via home.php).
 */
#portfolio_page #hero #title-home {
  --home-hero-title-color: var(--arkt-type-h1-color);
  --home-hero-subtitle-color: var(--arkt-type-h2-color);
}

#portfolio_page #hero #title-home #home-about h1,
#portfolio_page #hero #title-home #home-present h1 {
  font-size: var(--arkt-type-h1-size) !important;
  line-height: calc(var(--arkt-type-h1-size) + 10px) !important;
  font-weight: var(--arkt-type-h1-weight) !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(--arkt-type-h2-size) !important;
  line-height: var(--arkt-type-h2-line) !important;
  font-weight: var(--arkt-type-h2-weight) !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(--arkt-type-h1-color);
  --home-feature-subtitle-color: var(--arkt-type-h2-color);
}

#portfolio_page section.home-feature-vedette #feature-about h1,
#portfolio_page section.home-feature-vedette #feature-present h1 {
  font-size: var(--arkt-type-h1-size) !important;
  line-height: calc(var(--arkt-type-h1-size) + 10px) !important;
  font-weight: var(--arkt-type-h1-weight) !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(--arkt-type-h2-size) !important;
  line-height: var(--arkt-type-h2-line) !important;
  font-weight: var(--arkt-type-h2-weight) !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. sous-titre album) */
#portfolio_page main:not(.arkt-landing) #hero #title-star #title-about h2,
#portfolio_page main:not(.arkt-landing) #title-star #title-about h2 {
  font-size: var(--arkt-type-h2-size) !important;
  line-height: var(--arkt-type-h2-line) !important;
  font-weight: var(--arkt-type-h2-weight) !important;
  color: var(--arkt-type-h2-color) !important;
  margin: 0 !important;
}

#portfolio_page main:not(.arkt-landing) #hero #title-star #title-about h2 :is(a, span, p, strong, em, b, i, small),
#portfolio_page main:not(.arkt-landing) #title-star #title-about h2 :is(a, span, p, strong, em, b, i, small) {
  color: var(--arkt-type-h2-color) !important;
}

/* Hero contenus (#title-content) : lisibilité sur image */
#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 h2 (modules, blog, etc.) — hors accueil */
#portfolio_page main:not(.arkt-landing) h2[class*="title-align"]:not(#h2_demo),
#portfolio_page main:not(.arkt-landing) h2[class*="padding-bottom"][class*="title-align"]:not(#h2_demo),
#portfolio_page main:not(.arkt-landing) h2.big-margin-top,
#portfolio_page main:not(.arkt-landing) section:not(.demo-pair-section) > article > h2,
#portfolio_page main:not(.arkt-landing) h2.subtitle {
  font-size: var(--arkt-type-h2-size) !important;
  line-height: var(--arkt-type-h2-line) !important;
  font-weight: var(--arkt-type-h2-weight) !important;
  color: var(--arkt-type-h2-color) !important;
  margin-top: 0 !important;
  padding: 0 !important;
  text-align: inherit !important;
}

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

/* Intertitres h3 — hors accueil */
#portfolio_page main:not(.arkt-landing) h3[class*="title-align"],
#portfolio_page main:not(.arkt-landing) h3[class*="padding-bottom"][class*="title-align"] {
  font-size: var(--arkt-type-h3-size) !important;
  line-height: var(--arkt-type-h3-line) !important;
  font-weight: var(--arkt-type-h3-weight) !important;
  color: color-mix(in srgb, var(--arkt-accent) 32%, var(--arkt-text-muted)) !important;
  margin-top: 0 !important;
  padding: 0 !important;
  text-align: inherit !important;
}

#portfolio_page main:not(.arkt-landing) h3[class*="title-align"] :is(a, span, p, strong, em, b, i, small),
#portfolio_page main:not(.arkt-landing) h3[class*="padding-bottom"][class*="title-align"] :is(a, span, p, strong, em, b, i, small) {
  color: color-mix(in srgb, var(--arkt-accent) 32%, var(--arkt-text-muted)) !important;
}

/* Titres de cartes / listes */
#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 (hors accueil) */
#portfolio_page main:not(.arkt-landing) .content-article h1 {
  font-size: var(--arkt-type-h1-size) !important;
  line-height: calc(var(--arkt-type-h1-size) + 10px) !important;
  font-weight: var(--arkt-type-h1-weight) !important;
  color: var(--arkt-type-h1-color) !important;
  display: block !important;
  padding: 0 !important;
}

#portfolio_page main:not(.arkt-landing) .content-article h1 :is(a, span, p, strong, em, b, i, small) {
  color: var(--arkt-type-h1-color) !important;
}

#portfolio_page main:not(.arkt-landing) .content-article :is(h2, h3, h4, h5, h6) {
  font-size: var(--arkt-type-h2-size) !important;
  line-height: var(--arkt-type-h2-line) !important;
  font-weight: var(--arkt-type-h2-weight) !important;
  color: var(--arkt-type-h2-color) !important;
}

#portfolio_page main:not(.arkt-landing) .content-article :is(h2, h3, h4, h5, h6) :is(a, span, p, strong, em, b, i, small) {
  color: var(--arkt-type-h2-color) !important;
}