/* Version: 13-07-2026-c — une seule largeur : content_width (largeur du contenu) */
.hero-layout,
.feature-layout {
    width: 100%;
    --hero-content-gap: clamp(2rem, 5vw, 4rem);
    --feature-content-gap: var(--hero-content-gap);
}

.hero-layout #title-home,
.feature-layout #title-feature {
    display: grid;
    width: 100%;
    align-items: stretch;
    box-sizing: border-box;
    position: relative;
}

/* Espacement vertical commun au texte et à l'image (layouts côte à côte ou empilés) */
.hero-layout:not(.hero-layout--image-behind) #title-home,
.feature-layout:not(.feature-layout--image-behind) #title-feature {
    padding-top: var(--hero-padding-top, 45px);
    padding-bottom: var(--hero-padding-bottom, 45px);
}

.feature-layout:not(.feature-layout--image-behind) #title-feature {
    padding-top: var(--feature-padding-top, var(--hero-padding-top, 45px));
    padding-bottom: var(--feature-padding-bottom, var(--hero-padding-bottom, 45px));
}

.hero-layout #title-home #home-about,
.feature-layout #title-feature #feature-about {
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
}

/* Image en fond : le padding vertical reste sur le bloc texte */
.hero-layout--image-behind #title-home #home-about,
.feature-layout--image-behind #title-feature #feature-about {
    padding-top: var(--hero-padding-top, 45px);
    padding-bottom: var(--hero-padding-bottom, 45px);
}

.feature-layout--image-behind #title-feature #feature-about {
    padding-top: var(--feature-padding-top, var(--hero-padding-top, 45px));
    padding-bottom: var(--feature-padding-bottom, var(--hero-padding-bottom, 45px));
}

.hero-layout:not(.hero-layout--image-behind) #title-home #home-about,
.feature-layout:not(.feature-layout--image-behind) #title-feature #feature-about {
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
    margin-left: 0;
    margin-right: 0;
    width: 100%;
    max-width: 100%;
}

/* Largeur du contenu (colonne texte) — hors mode derrière */
.hero-layout--content-limited:not(.hero-layout--image-behind) #title-home #home-about,
.feature-layout--content-limited:not(.feature-layout--image-behind) #title-feature #feature-about {
    max-width: var(--layout-limited-max-width, 1000px);
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

/* Hors mode derrière : la largeur de section est sur #title-home / #title-feature */
.hero-layout:not(.hero-layout--image-behind) #title-home #home-about.limited-width,
.hero-layout:not(.hero-layout--image-behind) #title-home #home-about.full-width,
.feature-layout:not(.feature-layout--image-behind) #title-feature #feature-about.limited-width,
.feature-layout:not(.feature-layout--image-behind) #title-feature #feature-about.full-width {
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
}

.hero-layout--content-limited:not(.hero-layout--image-behind) #title-home #home-about.limited-width,
.feature-layout--content-limited:not(.feature-layout--image-behind) #title-feature #feature-about.limited-width {
    max-width: var(--layout-limited-max-width, 1000px);
    margin-left: auto;
    margin-right: auto;
}

#portfolio_page #hero.hero-layout #title-home,
#portfolio_page section.home-feature-vedette.feature-layout #title-feature {
    display: grid !important;
    column-gap: var(--hero-content-gap, clamp(2rem, 5vw, 4rem));
    row-gap: var(--hero-content-gap, clamp(2rem, 5vw, 4rem));
}

.hero-layout--section-full.hero-layout--image-behind #title-home,
.feature-layout--section-full.feature-layout--image-behind #title-feature {
    width: 100%;
    margin: 0;
}

/* Image derrière : fond pleine largeur, pas de padding latéral sur la section */
.hero-layout--image-behind,
.feature-layout--image-behind {
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 0 !important;
}

/* Mode derrière + largeur fixe : conteneur texte centré (1000px), comme #about-content */
.hero-layout--image-behind #title-home #home-about.limited-width,
.feature-layout--image-behind #title-feature #feature-about.limited-width {
    max-width: var(--layout-limited-max-width, 1000px);
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
}

/* Mode derrière + pleine page : reproduire le padding latéral de section comme sur /about */
.hero-layout--image-behind #title-home #home-about.full-width,
.feature-layout--image-behind #title-feature #feature-about.full-width {
    max-width: 1500px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
}

/* Hors mode derrière : la largeur de section est portée par #title-home / #title-feature */
.hero-layout:not(.hero-layout--image-behind) #title-home.limited-width,
.feature-layout:not(.feature-layout--image-behind) #title-feature.limited-width {
    max-width: var(--layout-limited-max-width, 1000px);
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.hero-layout:not(.hero-layout--image-behind) #title-home.full-width,
.feature-layout:not(.feature-layout--image-behind) #title-feature.full-width {
    max-width: 1500px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

/* Largeur fixe : le conteneur .limited-width porte la contrainte (comme #about-content) */
.hero-layout--section-limited,
#portfolio_page #hero.hero-layout--section-limited,
.feature-layout--section-limited,
#portfolio_page section.home-feature-vedette.feature-layout--section-limited {
    max-width: none;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
}

/* Image derrière : fond pleine largeur (annule max-width de .full-width sur le conteneur titre) */
.hero-layout--image-behind #title-home,
.hero-layout--image-behind #title-home.limited-width,
.hero-layout--image-behind #title-home.full-width,
#portfolio_page #hero.hero-layout--image-behind #title-home,
.feature-layout--image-behind #title-feature,
.feature-layout--image-behind #title-feature.limited-width,
.feature-layout--image-behind #title-feature.full-width,
#portfolio_page section.home-feature-vedette.feature-layout--image-behind #title-feature {
    max-width: none;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    grid-template-columns: minmax(0, 1fr);
}

.hero-layout--image-behind #home-present,
.feature-layout--image-behind #feature-present {
    display: none !important;
}

/* Pleine page : annule la contrainte .full-width (1500px) sur la section elle-même */
#portfolio_page #hero.hero-layout--section-full,
#portfolio_page section.home-feature-vedette.feature-layout--section-full,
.hero-layout--section-full,
.feature-layout--section-full {
    max-width: none;
    width: 100%;
}

.hero-layout--image-behind #title-home,
.feature-layout--image-behind #title-feature {
    background-size: cover;
    background-position: center;
    min-height: 40vh;
}

.hero-layout--image-behind #title-home #home-about,
.feature-layout--image-behind #title-feature #feature-about {
    height: auto;
    min-height: 0;
}

.hero-layout--image-behind #title-home::before,
.feature-layout--image-behind #title-feature::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, var(--hero-overlay-opacity, 0.24));
    pointer-events: none;
    z-index: 0;
}

.feature-layout--image-behind #title-feature::before {
    background: rgba(0, 0, 0, var(--feature-overlay-opacity, var(--hero-overlay-opacity, 0.24)));
}

.hero-layout--image-behind #title-home > *,
.feature-layout--image-behind #title-feature > * {
    position: relative;
    z-index: 1;
}

.hero-layout--image-left,
.hero-layout--image-right,
.feature-layout--image-left,
.feature-layout--image-right {
    --hero-side-image-max: 50%;
}

/* Image à gauche : colonne image | colonne texte */
#portfolio_page #hero.hero-layout.hero-layout--image-left #title-home,
.hero-layout--image-left #title-home {
    --side-image-width: min(var(--hero-image-width-ratio, 50%), var(--hero-side-image-max));
    grid-template-columns: minmax(0, var(--side-image-width)) minmax(0, 1fr);
}

#portfolio_page section.home-feature-vedette.feature-layout.feature-layout--image-left #title-feature,
.feature-layout--image-left #title-feature {
    --side-image-width: min(var(--feature-image-width-ratio, 50%), var(--hero-side-image-max));
    grid-template-columns: minmax(0, var(--side-image-width)) minmax(0, 1fr);
}

/* Image à droite : colonne texte | colonne image */
#portfolio_page #hero.hero-layout.hero-layout--image-right #title-home,
.hero-layout--image-right #title-home {
    --side-image-width: min(var(--hero-image-width-ratio, 50%), var(--hero-side-image-max));
    grid-template-columns: minmax(0, 1fr) minmax(0, var(--side-image-width));
}

#portfolio_page section.home-feature-vedette.feature-layout.feature-layout--image-right #title-feature,
.feature-layout--image-right #title-feature {
    --side-image-width: min(var(--feature-image-width-ratio, 50%), var(--hero-side-image-max));
    grid-template-columns: minmax(0, 1fr) minmax(0, var(--side-image-width));
}

.hero-layout--image-left #home-about,
.feature-layout--image-left #feature-about {
    order: 2;
}

.hero-layout--image-left #home-present,
.feature-layout--image-left #feature-present {
    order: 1;
}

.hero-layout--image-right #home-about,
.feature-layout--image-right #feature-about {
    order: 1;
}

.hero-layout--image-right #home-present,
.feature-layout--image-right #feature-present {
    order: 2;
}

/* Image à gauche/droite : le texte reste en haut, l'image s'aligne verticalement dans la zone utile */
.hero-layout--image-left #home-about,
.hero-layout--image-right #home-about,
.feature-layout--image-left #feature-about,
.feature-layout--image-right #feature-about {
    align-self: start;
}

.hero-layout--image-left #home-present,
.hero-layout--image-right #home-present,
.feature-layout--image-left #feature-present,
.feature-layout--image-right #feature-present {
    align-self: center;
    height: auto;
}

.hero-layout--image-left.hero-layout--image-valign-top #home-present,
.hero-layout--image-right.hero-layout--image-valign-top #home-present,
.feature-layout--image-left.feature-layout--image-valign-top #feature-present,
.feature-layout--image-right.feature-layout--image-valign-top #feature-present {
    align-self: start;
}

.hero-layout--image-left.hero-layout--image-valign-center #home-present,
.hero-layout--image-right.hero-layout--image-valign-center #home-present,
.feature-layout--image-left.feature-layout--image-valign-center #feature-present,
.feature-layout--image-right.feature-layout--image-valign-center #feature-present {
    align-self: center;
}

.hero-layout--image-left.hero-layout--image-valign-bottom #home-present,
.hero-layout--image-right.hero-layout--image-valign-bottom #home-present,
.feature-layout--image-left.feature-layout--image-valign-bottom #feature-present,
.feature-layout--image-right.feature-layout--image-valign-bottom #feature-present {
    align-self: end;
}

.hero-layout--image-above #title-home,
.hero-layout--image-below #title-home {
    grid-template-columns: 1fr;
    row-gap: var(--hero-content-gap, 2rem);
}

.feature-layout--image-above #title-feature,
.feature-layout--image-below #title-feature {
    grid-template-columns: 1fr;
    row-gap: var(--feature-content-gap, var(--hero-content-gap, 2rem));
}

.hero-layout--image-above #home-present,
.feature-layout--image-above #feature-present {
    order: 1;
}

.hero-layout--image-above #home-about,
.feature-layout--image-above #feature-about {
    order: 2;
}

.hero-layout--image-below #home-about,
.feature-layout--image-below #feature-about {
    order: 1;
}

.hero-layout--image-below #home-present,
.feature-layout--image-below #feature-present {
    order: 2;
}

.hero-layout--image-none #home-present,
.feature-layout--image-none #feature-present {
    display: none !important;
}

.hero-layout #home-present {
    min-height: 200px;
    width: 100%;
    max-width: 100%;
    aspect-ratio: var(--hero-image-aspect-ratio, 16 / 9);
    background-size: cover;
    background-position: center;
    background-color: var(--modules-black-alpha2, rgba(0, 0, 0, 0.12));
    --layout-image-radius: var(--hero-image-radius, 0);
    border-radius: var(--layout-image-radius, var(--hero-image-radius, 0));
    overflow: visible;
    display: block;
    position: relative;
}

.feature-layout #feature-present {
    min-height: 200px;
    width: 100%;
    max-width: 100%;
    aspect-ratio: var(--feature-image-aspect-ratio, 16 / 9);
    background-size: cover;
    background-position: center;
    background-color: var(--modules-black-alpha2, rgba(0, 0, 0, 0.12));
    --layout-image-radius: var(--feature-image-radius, 0);
    border-radius: var(--layout-image-radius, var(--feature-image-radius, 0));
    overflow: visible;
    display: block;
    position: relative;
}

/* Bordure / ombre vignettes sur la couche image (comme .thumb.thumb-border) */
.hero-layout:not(.hero-layout--image-behind):not(.hero-layout--image-none) #home-present #home-bg,
.hero-layout:not(.hero-layout--image-behind):not(.hero-layout--image-none) #home-present.customizer-hero-placeholder,
.feature-layout:not(.feature-layout--image-behind):not(.feature-layout--image-none) #feature-present #feature-bg,
.feature-layout:not(.feature-layout--image-behind):not(.feature-layout--image-none) #feature-present.customizer-hero-placeholder {
    box-sizing: border-box;
    border-width: var(--portfolios-thumbnail-border-width, 0px);
    border-style: var(--portfolios-thumbnail-border-type, solid);
    border-color: var(--portfolios-thumbnail-border-color, #222);
    box-shadow: var(--portfolios-thumbnail-box-shadow, none);
    overflow: visible;
}

.hero-layout--image-behind #title-home {
    border-radius: var(--hero-image-radius, 0);
    border-width: var(--portfolios-thumbnail-border-width, 0px);
    border-style: var(--portfolios-thumbnail-border-type, solid);
    border-color: var(--portfolios-thumbnail-border-color, #222);
    box-shadow: var(--portfolios-thumbnail-box-shadow, none);
    box-sizing: border-box;
    overflow: visible;
}

.feature-layout--image-behind #title-feature {
    border-radius: var(--feature-image-radius, 0);
    border-width: var(--portfolios-thumbnail-border-width, 0px);
    border-style: var(--portfolios-thumbnail-border-type, solid);
    border-color: var(--portfolios-thumbnail-border-color, #222);
    box-shadow: var(--portfolios-thumbnail-box-shadow, none);
    box-sizing: border-box;
    overflow: visible;
}

.hero-layout--image-behind #title-home::before,
.feature-layout--image-behind #title-feature::before {
    border-radius: inherit;
}

.hero-layout--image-behind #home-present,
.hero-layout--image-none #home-present,
.feature-layout--image-behind #feature-present,
.feature-layout--image-none #feature-present {
    border-radius: 0;
}

.hero-layout--aspect-square #home-present,
.feature-layout--aspect-square #feature-present {
    aspect-ratio: 1 / 1;
}

.hero-layout--aspect-vertical #home-present,
.feature-layout--aspect-vertical #feature-present {
    aspect-ratio: 9 / 16;
}

.hero-layout--aspect-horizontal #home-present,
.feature-layout--aspect-horizontal #feature-present {
    aspect-ratio: 16 / 9;
}

/* Image derrière : la hauteur suit le texte + padding, pas le ratio d'aspect */
.hero-layout--image-behind.hero-layout--aspect-square #title-home,
.hero-layout--image-behind.hero-layout--aspect-vertical #title-home,
.hero-layout--image-behind.hero-layout--aspect-horizontal #title-home,
.feature-layout--image-behind.feature-layout--aspect-square #title-feature,
.feature-layout--image-behind.feature-layout--aspect-vertical #title-feature,
.feature-layout--image-behind.feature-layout--aspect-horizontal #title-feature {
    aspect-ratio: auto;
    min-height: 0;
}

.hero-layout #home-present #home-bg,
.feature-layout #feature-present #feature-bg {
    width: 100%;
    height: 100%;
    min-height: inherit;
    background-size: cover;
    background-position: center;
    border-radius: inherit;
}

/* Ne pas écraser l'arrondi par portfolios-border-radius-l */
.hero-layout #home-present #home-bg.portfolios-border-radius-l,
.feature-layout #feature-present #feature-bg.portfolios-border-radius-l {
    border-radius: inherit;
}

.hero-layout--image-behind.customizer-hero-placeholder #title-home,
.feature-layout--image-behind.customizer-hero-placeholder #title-feature {
    background-color: var(--modules-black-alpha2, rgba(0, 0, 0, 0.12));
}

.hero-layout.customizer-hero-placeholder #home-present,
.feature-layout.customizer-hero-placeholder #feature-present {
    background-image: var(--customizer-hero-placeholder-image, none);
}

.hero-layout #home-about,
.feature-layout #feature-about {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-width: 0;
    max-width: 100%;
}

.hero-layout #home-about .customizer-socials-zone,
.feature-layout #feature-about .customizer-socials-zone {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    align-self: stretch;
}

.hero-layout #home-about .social-medias,
.feature-layout #feature-about .social-medias {
    flex-wrap: wrap;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    align-self: stretch;
}

.hero-layout .align-left,
.feature-layout .title-align-left {
    align-items: flex-start;
    text-align: left;
}

.hero-layout .align-center,
.feature-layout .title-align-center {
    align-items: center;
    text-align: center;
}

.hero-layout .align-right,
.feature-layout .title-align-right {
    align-items: flex-end;
    text-align: right;
}

@media (max-width: 768px) {
    .hero-layout--image-left,
    .hero-layout--image-right,
    .feature-layout--image-left,
    .feature-layout--image-right {
        --hero-side-image-max: 25%;
    }
}