/* assets/css/public/structure/feedback/loader.css */
/* @layer-wrap:site.socle */
@layer site.socle {
/* Version: 20-09-2026-16-46 */
/* Version: 02-09-2026-save-loader-stop */
#loader {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 790;
  background-color: var(
    --portfolios-theme-bg-main,
    var(--portfolios-bg-main-color, var(--portfolios-color-bg-main, #fafafa))
  );
  color: var(--portfolios-body-text-color, var(--portfolios-text-main-color, inherit));
  font-family: var(--portfolios-font-name), var(--portfolios-font-stack, sans-serif);
  background-image: none;
  pointer-events: none;
  opacity: 1;
  visibility: visible;
  transition: opacity 420ms ease, visibility 0s linear 420ms;
}

body.customizer-page #loader {
  display: none;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

#loader::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: inherit;
  background-image: none;
  pointer-events: none;
  transition: opacity 420ms ease, background 420ms ease;
}

#loader.loader-hidden::before {
  opacity: 0;
}

.ark-loader {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  pointer-events: none;
  color: var(--portfolios-icon-color, var(--portfolios-body-text-color, var(--portfolios-text-main-color, inherit)));
}

.ark-loader-mark {
  position: relative;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ark-loader-pulse {
  position: absolute;
  inset: 4px;
  border-radius: var(--portfolios-border-radius-full, 50%);
  background: currentColor;
  opacity: 0.08;
  animation: ark-loader-pulse 1.6s ease-in-out infinite;
}

.ark-loader-ring {
  position: relative;
  z-index: 1;
  width: 48px;
  height: 48px;
  display: block;
  animation: ark-loader-spin 1.1s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
}

.ark-loader-ring-track,
.ark-loader-ring-arc {
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
}

.ark-loader-ring-track {
  opacity: 0.16;
}

.ark-loader-ring-arc {
  stroke-linecap: round;
  stroke-dasharray: 56 80;
}

@keyframes ark-loader-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes ark-loader-pulse {
  0%,
  100% {
    transform: scale(0.72);
    opacity: 0.05;
  }

  50% {
    transform: scale(1);
    opacity: 0.12;
  }
}

.ark-loader-label {
  color: var(--portfolios-body-text-color, var(--portfolios-text-main-color, inherit));
  font-family: var(--portfolios-font-name), var(--portfolios-font-stack, sans-serif);
  font-size: var(--portfolios-font-size-base);
  font-weight: 400;
  letter-spacing: var(--portfolios-letter-spacing, 0.4px);
  line-height: var(--portfolios-text-line-height, 1.2);
  text-align: center;
  opacity: 0.88;
}

.sr-only {
  position: absolute;
  left: -9999px;
}

#loader.loader-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Header / footer restent visibles au-dessus du loader ; seul le contenu est masqué */
html:not(.ark-page-ready) #portfolio_page {
  opacity: 1;
  visibility: visible;
  z-index: auto;
}

html:not(.ark-page-ready) #portfolio_page > :is(header, #header, footer, #footer, #legal) {
  opacity: 1;
  visibility: visible;
  position: relative;
  z-index: 820;
}

html:not(.ark-page-ready) #portfolio_page > :not(header):not(#header):not(footer):not(#footer):not(#legal):not(#loader),
html:not(.ark-page-ready) .page-content {
  opacity: 0;
}

html.ark-page-ready #portfolio_page,
html.ark-page-ready .page-content {
  opacity: 1;
  visibility: visible;
  transition: none;
}

@media (max-width: 600px) {
  .ark-loader-mark {
    width: 48px;
    height: 48px;
  }

  .ark-loader-ring {
    width: 40px;
    height: 40px;
  }

  .ark-loader-label {
    font-size: 0.95rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  #loader {
    transition: opacity 160ms linear, visibility 0s linear 160ms;
  }

  #loader::before {
    transition: opacity 160ms linear;
  }

  .ark-loader-pulse,
  .ark-loader-ring {
    animation: none;
  }

  .ark-loader-ring-arc {
    stroke-dasharray: 70 44;
    opacity: 0.85;
  }

  .ark-loader-pulse {
    opacity: 0.08;
    transform: none;
  }
}
}

/* assets/css/public/structure/feedback/page-reveal.css */
/* @layer-wrap:site.effets */
@layer site.effets {
/* Version: 20-09-2026-16-46 */
/* Opt-out custom templates: html[data-ark-reveal="off"] */
#portfolio_page {
  --ark-reveal-duration: 520ms;
  --ark-reveal-distance: 18px;
  --ark-reveal-stagger: 70ms;
  --ark-reveal-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

#portfolio_page .ark-reveal {
  opacity: 0;
  transform: translateY(var(--ark-reveal-distance));
  transition:
    opacity var(--ark-reveal-duration) var(--ark-reveal-ease),
    transform var(--ark-reveal-duration) var(--ark-reveal-ease);
  transition-delay: calc(var(--ark-reveal-index, 0) * var(--ark-reveal-stagger));
  will-change: opacity, transform;
}

#portfolio_page .ark-reveal.ark-reveal--fade {
  transform: none;
  will-change: opacity;
}

#portfolio_page .ark-reveal.is-revealed {
  opacity: 1;
  transform: none;
}

html.ark-reveal-skip #portfolio_page .ark-reveal,
html[data-ark-reveal="off"] #portfolio_page .ark-reveal {
  opacity: 1;
  transform: none;
  transition: none;
  will-change: auto;
}

@media (prefers-reduced-motion: reduce) {
  #portfolio_page {
    --ark-reveal-duration: 0ms;
    --ark-reveal-distance: 0px;
    --ark-reveal-stagger: 0ms;
  }

  #portfolio_page .ark-reveal {
    opacity: 1;
    transform: none;
    transition: none;
    will-change: auto;
  }
}
}

/* assets/css/public/structure/feedback/press.css */
/* @layer-wrap:site.effets */
@layer site.effets {
/* Version: 18-10-2026-press */
/*
 * Effets d'interaction des cartes et vignettes (clic, survol des médias intégrés), venus de
 * design/thumbnails/main.css. Couche « effets » (shared/core/design/stylesheets.php) : après le thème et
 * l'apparition au défilement, qu'ils remplacent pendant le clic sans !important.
 */

/* Effets au clic - Mode LISTE (sur .thumbnail) */
.thumbnail:active {
	transform: var(--portfolios-thumbnail-click-transform, none);
	transition: transform 0.1s ease;
}

/* Effets au clic - Mode TUILES (sur .thumbnail-tile) */
.thumbnail-tile:active {
	transform: var(--portfolios-thumbnail-click-transform, none);
	transition: transform 0.1s ease;
}

/* Styling for video hover - Zoom disabled as requested */
.thumbnail-tile.video-tile:hover,
.thumbnail-tile.video-tile:focus,
.thumbnail-tile.video-tile:active {
    transform: none;
    filter: var(--portfolios-thumbnail-hover-filter, brightness(100%));
    box-shadow: var(--portfolios-thumbnail-box-shadow, none);
}

.vertical-grid-item:active,
.horizontal-grid-item:active {
    transform: var(--portfolios-thumbnail-click-transform, none);
    transition: transform 0.1s ease;
}

#goto article a:not(.platform-link):active {
    transform: var(--portfolios-thumbnail-click-transform, none);
    transition: transform 0.1s ease;
}

.blog-list .thumbnail-tile:active,
.blog-list .thumbnail:active {
    transform: var(--portfolios-thumbnail-click-transform, none);
}

.service-item:active,
.faq-item:active,
.profil-button:active,
.agenda-item:active {
    transform: var(--portfolios-thumbnail-click-transform, none);
    transition: transform 0.1s ease;
}

.square-grid-item:active {
    transform: var(--portfolios-thumbnail-click-transform, none);
    transition: transform 0.1s ease;
}

.swipebox:active {
    transform: var(--portfolios-thumbnail-click-transform, none);
    transition: transform 0.1s ease;
}

#gallery a:active,
#production-show-photos-grid a:active {
	transform: var(--portfolios-thumbnail-click-transform, none);
	transition: transform 0.1s ease;
}

/* Médias intégrés (YouTube, Vimeo, vidéo…) : jamais d'effet survol / focus / clic du personnalisateur,
   l'interaction se fait dans le lecteur. Couvre les tuiles qui contiennent un lecteur. */
#portfolio_page :is(.thumbnail, .thumbnail-tile, .vertical-grid-item, .horizontal-grid-item):has(iframe, video, embed, object),
#portfolio_page :is(.thumbnail, .thumbnail-tile, .vertical-grid-item, .horizontal-grid-item):has(iframe, video, embed, object):is(:hover, :focus, :focus-within, :active),
#portfolio_page :is(.youtube, .vimeo, .dailymotion, .tiktok, .instagram, .facebook, .production-video-media),
#portfolio_page :is(.youtube, .vimeo, .dailymotion, .tiktok, .instagram, .facebook, .production-video-media):is(:hover, :focus, :focus-within, :active) {
	transform: none;
	filter: none;
	outline: none;
}
}

/* assets/css/backoffice/structure/feedback/roast.css */
@layer site.socle {
/* Version: 10-07-2026-19-09 */
/* roast.css — toast interne (flash), distinct des notifications applicatives */

.roast {
  background: var(--ak-glass-sheen), var(--ak-float-fill);
  -webkit-backdrop-filter: var(--ak-glass-blur);
  backdrop-filter: var(--ak-glass-blur);
  border: var(--ak-border-panel);
  position: fixed;
  bottom: 35px;
  right: 50px;
  padding: 15px 15px;
  border-radius: var(--radius-lg);
  display: none;
  z-index: 99;
  transform: scale(1.1);
  animation: roast-pop-x2 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes roast-pop-x2 {
  0% {
    opacity: 0;
    transform: scale(1.1);
  }
  100% {
    opacity: 1;
    transform: scale(1.2);
  }
}

.roast::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 2px;
  height: 5px;
  width: 0;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  background-color: var(--arktefakt-color-success, rgb(174, 241, 185));
  animation: roast-fill-border 10s linear forwards;
}

.roast.error::after {
  background-color: var(--arktefakt-color-danger, rgb(248, 215, 218));
}

@keyframes roast-fill-border {
  from { width: 0; }
  to { width: 98%; }
}

}
/* assets/css/backoffice/editor/forms/submit.css */
@layer site.socle {
/* Version: 10-07-2026-19-09 */
@keyframes form-submit-spin {
    to {
        transform: rotate(360deg);
    }
}

button.form-submit--pending {
    position: relative;
    pointer-events: none;
    cursor: wait;
    opacity: 0.88;
}

button.form-submit--pending::after {
    content: "";
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-left: 0.5em;
    vertical-align: -0.12em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: form-submit-spin 0.65s linear infinite;
}

input.form-submit--pending[type="submit"],
input.form-submit--pending[type="image"] {
    pointer-events: none;
    cursor: wait;
    opacity: 0.88;
    padding-left: 2.35em;
    background-repeat: no-repeat;
    background-position: 0.65em center;
    background-size: 1em 1em;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='%23666' stroke-width='3' stroke-dasharray='16 48' stroke-linecap='round'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='0.65s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/svg%3E");
}

}
/* assets/css/public/structure/layout/headings.css */
@layer site.reglages {
/* Version: 18-10-2026-casse-titres */
/*
 * Titres de gabarit : couleurs / tailles du setup (variables primary / secondary).
 * Titres in-body (.content-article) : voir structure/layout/content.css
 */

/* Logo / titre : taille pilotée par --portfolios-logo-title-size (dérivé du curseur setup / customizer) */
#portfolio_page #hub-logo .hub-logo__mark--text {
    font-size: var(--portfolios-logo-title-size, 20px);
    /* Casse (/theme) : sans réglage, la variable est invalide ⇒ valeur héritée ; les thèmes posent la leur en repli. */
    text-transform: var(--portfolios-logo-transform);
    line-height: calc(var(--portfolios-logo-title-size, 20px) + 2px);
    font-weight: bold;
    margin: 0;
    padding: 0;
}

/* 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.pf-w-content,
#portfolio_page main#about section article h1,
#portfolio_page #quatrecentquatre-elements h1,
#portfolio_page main section#hero > div > h1 {
    font-size: var(--portfolios-heading-primary-size);
    line-height: var(--portfolios-heading-primary-line-height, calc(var(--portfolios-heading-primary-size) + 2px));
    font-weight: bold;
    color: var(--portfolios-heading-primary-color);
    display: block;
    padding: 0;
    /* Casse (/theme), sinon celle du thème (--pf-title-transform, ex. cinema), sinon héritée. */
    text-transform: var(--portfolios-title-transform, var(--pf-title-transform));
}

#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.pf-w-content :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) {
    color: var(--portfolios-heading-primary-color);
}

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

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

/*
 * 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);
    line-height: var(--portfolios-heading-primary-line-height, calc(var(--portfolios-heading-primary-size) + 2px));
    font-weight: bold;
    color: var(--home-hero-title-color);
    display: block;
    padding: 0;
}

#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);
}

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

#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);
}

#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);
    line-height: var(--portfolios-heading-primary-line-height, calc(var(--portfolios-heading-primary-size) + 2px));
    font-weight: bold;
    color: var(--home-feature-title-color);
    display: block;
    padding: 0;
}

#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);
}

#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);
    line-height: var(--portfolios-heading-secondary-line-height, calc(var(--portfolios-heading-secondary-size) + 10px));
    font-weight: bold;
    color: var(--home-feature-subtitle-color);
    margin: 0;
}

#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);
}

/* Accueil — rythme vertical commun hero + vedettes : marges sous titre / sous-titre uniquement */
#portfolio_page #hero #title-home :is(#home-about, #home-present) h1,
#portfolio_page section.home-feature-vedette :is(#feature-about, #feature-present) h1 {
    margin: 0 0 8px;
}

#portfolio_page #hero #title-home :is(#home-about, #home-present) h2,
#portfolio_page section.home-feature-vedette :is(#feature-about, #feature-present) h2 {
    margin: 0 0 20px;
}

/* Équipe (/team) — nom membre h1, rôle h2 */
#portfolio_page .member-head h1,
#profil-modal-root .member-head h1 {
    font-size: var(--portfolios-heading-primary-size);
    line-height: var(--portfolios-heading-primary-line-height, calc(var(--portfolios-heading-primary-size) + 2px));
    font-weight: bold;
    color: var(--portfolios-heading-primary-color);
    margin: 0;
    padding: 0;
}

#portfolio_page .member-head h1 :is(a, span, p, strong, em, b, i, small),
#profil-modal-root .member-head h1 :is(a, span, p, strong, em, b, i, small) {
    color: var(--portfolios-heading-primary-color);
}

#portfolio_page .member-head h2,
#profil-modal-root .member-head h2 {
    font-size: var(--portfolios-heading-secondary-size);
    line-height: var(--portfolios-heading-secondary-line-height, calc(var(--portfolios-heading-secondary-size) + 10px));
    font-weight: bold;
    color: var(--portfolios-heading-secondary-color);
    margin: 0;
    padding: 0;
}

#portfolio_page .member-head h2 :is(a, span, p, strong, em, b, i, small),
#profil-modal-root .member-head h2 :is(a, span, p, strong, em, b, i, small) {
    color: var(--portfolios-heading-secondary-color);
}

/* 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);
    line-height: var(--portfolios-heading-secondary-line-height, calc(var(--portfolios-heading-secondary-size) + 10px));
    font-weight: bold;
    color: var(--portfolios-heading-secondary-color);
    margin: 0;
}

#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);
}

/* Intertitres de mise en page : classes title-align / padding-bottom (accueil, modules, etc.) */
/* :not(#h2_demo) : plus aucun élément ne porte cet id (ancienne démo de l'éditeur) ; gardé car il compte
   pour un id dans la spécificité des règles title-align ci-dessous. */
#portfolio_page main h2.subtitle {
    font-size: var(--portfolios-heading-secondary-size);
    line-height: var(--portfolios-heading-secondary-line-height, calc(var(--portfolios-heading-secondary-size) + 10px));
    font-weight: bold;
    color: var(--portfolios-heading-secondary-color);
    margin-top: 0;
    padding: 0;
}

#portfolio_page main h2[class*="title-align-left"]:not(#h2_demo),
#portfolio_page main h2[class*="pf-pb-"][class*="title-align-left"]:not(#h2_demo),
#portfolio_page main h3[class*="title-align-left"],
#portfolio_page main h3[class*="pf-pb-"][class*="title-align-left"] {
    text-align: left;
}

#portfolio_page main h2[class*="title-align-center"]:not(#h2_demo),
#portfolio_page main h2[class*="pf-pb-"][class*="title-align-center"]:not(#h2_demo),
#portfolio_page main h3[class*="title-align-center"],
#portfolio_page main h3[class*="pf-pb-"][class*="title-align-center"] {
    text-align: center;
}

#portfolio_page main h2[class*="title-align-right"]:not(#h2_demo),
#portfolio_page main h2[class*="pf-pb-"][class*="title-align-right"]:not(#h2_demo),
#portfolio_page main h3[class*="title-align-right"],
#portfolio_page main h3[class*="pf-pb-"][class*="title-align-right"] {
    text-align: right;
}

/* Exception : sur ordinateur, le titre de la colonne « Autres articles » d'un article est centré, quel que soit
   l'alignement des titres (venu de modules/blog/article.css ; l'emporte ici par la spécificité). */
@media screen and (min-width: 901px) {
    #portfolio_page #blog-article #blog-about > article.blog-aside-heading > h2[class*="title-align"] {
        text-align: center;
    }
}

#portfolio_page main h2.section-title:not(#h2_demo) :is(a, span, p, strong, em, b, i, small),
#portfolio_page main h2.pf-mt-lg :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*="pf-pb-"][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);
}

/*
 * Intertitres de gabarit : la typographie (taille, couleur, graisse, marges)
 * est portée par `.section-title`, émise systématiquement par
 * portfolios_module_heading_classes() — y compris sous thème personnalisé, où
 * `title-align-*` n'est volontairement pas émis. Les classes `title-align-*` ne
 * pilotent plus que `text-align` (bloc ci-dessus).
 *
 * Les six propriétés ci-dessous sont verrouillées en `` : un thème
 * personnalisé qui veut ses propres intertitres doit les contester une à une,
 * et pas seulement `color` / `font-weight` — voir custom/css/base/section-titles.css.
 * Le sélecteur `section > article > h2` attrape aussi les titres écrits à la
 * main dans un thème custom : ceux-là passent par `.pfcustom-section-title`.
 */
#portfolio_page main h2.section-title:not(#h2_demo),
#portfolio_page main h2.pf-mt-lg,
#portfolio_page main h3[class*="title-align"],
#portfolio_page main h3[class*="pf-pb-"][class*="title-align"],
#portfolio_page main section:not(.demo-pair-section) > article > h2 {
    font-size: var(--portfolios-heading-secondary-size);
    line-height: var(--portfolios-heading-secondary-line-height, calc(var(--portfolios-heading-secondary-size) + 10px));
    font-weight: bold;
    color: var(--portfolios-heading-secondary-color);
    margin-top: 0;
    padding: 0;
    /* Casse des titres (/theme) : comme les h1, sinon celle du thème, sinon héritée. */
    text-transform: var(--portfolios-title-transform, var(--pf-title-transform));
}

/* Titres de sections (accueil / modules) : couleur « titres » du setup, pas « sous-titres » */
#portfolio_page main section.section-bg h2.section-title:not(#h2_demo),
#portfolio_page main section.section-content:not(.customizer-demo-section) h2.section-title:not(#h2_demo),
#portfolio_page main section.section-bg h3[class*="title-align"],
#portfolio_page main section.section-content:not(.customizer-demo-section) h3[class*="title-align"] {
    color: var(--portfolios-heading-primary-color);
}

#portfolio_page main section.section-bg h2.section-title:not(#h2_demo) :is(a, span, p, strong, em, b, i, small),
#portfolio_page main section.section-content:not(.customizer-demo-section) h2.section-title:not(#h2_demo) :is(a, span, p, strong, em, b, i, small),
#portfolio_page main section.section-bg h3[class*="title-align"] :is(a, span, p, strong, em, b, i, small),
#portfolio_page main section.section-content:not(.customizer-demo-section) h3[class*="title-align"] :is(a, span, p, strong, em, b, i, small) {
    color: var(--portfolios-heading-primary-color);
}

#portfolio_page #subtitle-article h2.subtitle,
#portfolio_page #subtitle-article h2.subtitle :is(a, span, p, strong, em, b, i, small) {
    color: inherit;
}

}
/* assets/css/public/structure/layout/theme-advanced-colors.css */
/* @layer-wrap:site.socle */
@layer site.socle {
/* Version: 23-09-2026-20-19 */
/* Version: 12-07-2026 — portée des couleurs avancées (texte courant, icônes UI, bordures inter-sections) */

/* Texte courant : paragraphes et contenu courant dans main */
#portfolio_page main :where(p, li, dd, blockquote, figcaption, td, th) {
    color: var(--portfolios-body-text-color, var(--portfolios-text-main-color, inherit));
}

#portfolio_page #hero #home-about :where(p, li),
#portfolio_page .home-feature-vedette #feature-about :where(p, li) {
    color: var(--portfolios-body-text-color, var(--portfolios-text-main-color, inherit));
}

/* Pied de page : description sous le titre + coordonnées (hors .footer-heading) */
#portfolio_page footer #footer-about :where(p, div, span, li),
#portfolio_page footer .contact-details,
#portfolio_page footer .contact-details :where(span, div) {
    color: var(--portfolios-body-text-color, var(--portfolios-text-main-color, inherit));
}

/* Labels vignettes blog : dérivés du fond, hors override texte courant */
#portfolio_page .article-blog-infos,
#portfolio_page .article-blog-infos :is(p, h4, h5, div, span, time),
#portfolio_page .pf-thumbs--landscape p,
#portfolio_page .pf-thumbs--portrait p,
#portfolio_page .pf-thumbs--square p {
    color: var(--portfolios-ui-label-color, var(--portfolios-text-main-color, inherit));
}

/* Séparateurs entre sections, header et footer */
#portfolio_page main > section + section {
    border-top: var(--portfolios-section-divider-width, 1px) solid var(--portfolios-section-divider-color, var(--portfolios-ui-border-color, #e0e0e0));
}

/* Header : --pf-header-rule = réglage « Séparation du bas » (design/themes/basic/header-options.css) ;
   sinon le filet propre au thème (--pf-theme-header-rule : Brutal, Suisse, Terminal), sinon le séparateur entre sections. */
#portfolio_page #header {
    border-bottom: var(--pf-header-rule, var(--pf-theme-header-rule, var(--portfolios-section-divider-width, 1px) solid var(--portfolios-section-divider-color, var(--portfolios-ui-border-color, #e0e0e0))));
}

/* Pied de page : --pf-footer-rule = réglage « Séparation du haut » (design/themes/basic/footer-options.css) ;
   sinon le filet propre au thème (--pf-theme-footer-rule : Suisse, Éditorial), sinon le séparateur entre sections. */
#portfolio_page #footer {
    border-top: var(--pf-footer-rule, var(--pf-theme-footer-rule, var(--portfolios-section-divider-width, 1px) solid var(--portfolios-section-divider-color, var(--portfolios-ui-border-color, #e0e0e0))));
}

#portfolio_page main > section:first-child {
    border-top: none;
}

/* Icônes UI générales (hors réseaux sociaux) */
#portfolio_page #goto .platform-link__open svg {
    fill: currentColor;
}

#portfolio_page #about #services .populare .populare-head svg {
    fill: var(--portfolios-icon-color, var(--portfolios-theme-fill, #0f0f0f));
}

#portfolio_page #about #services .content svg {
    fill: var(--portfolios-icon-color-alt, var(--portfolios-theme-fill-alt, #bdbdbd));
}

#portfolio_page #about #services .populare li {
    color: var(--portfolios-body-text-color, var(--portfolios-text-main-color, inherit));
}
}