/* assets/css/public/design/home/order.css */
/* @layer-wrap:site.elements */
@layer site.elements {
/* Version: 20-09-2026-16-46 */
main {
    display: flex;
    flex-direction: column;
}

#title, #edit-home {
    order: 1;
}

.show-order-1 {
    order: 2;
}

.show-order-2 {
    order: 3;
}

.show-order-3 {
    order: 4;
}

.show-order-4 {
    order: 5;
}

.show-order-5 {
    order: 6;
}

.show-order-6 {
    order: 7;
}

.show-order-7 {
    order: 8;
}

.show-order-8 {
    order: 9;
}

.show-order-9 {
    order: 10;
}

.show-order-10 {
    order: 11;
}

.show-order-11 {
    order: 12;
}

.show-order-12 {
    order: 13;
}

.show-order-13 {
    order: 14;
}

.show-order-14 {
    order: 15;
}
}

/* assets/css/public/modules/videos/showreel.css */
/* @layer-wrap:site.elements */
@layer site.elements {
/* Version: 20-09-2026-16-46 */
}

/* assets/css/public/modules/casting/casting.css */
/* @layer-wrap:site.elements */
@layer site.elements {
/* Version: 20-09-2026-16-46 */
/* Module Casting — thème portfolio (polices, fonds, contours via variables :root) */

#portfolio_page #casting .casting-section-title,
#portfolio_page .casting-home-block .casting-section-title,
#portfolio_page #casting .casting-detail-label,
#portfolio_page .casting-home-block .casting-detail-label,
#portfolio_page #casting .casting-timeline-title,
#portfolio_page .casting-home-block .casting-timeline-title {
    margin: 0;
    padding: 0;
    font-family: inherit;
    font-size: var(--portfolios-heading-secondary-size, 14px);
    line-height: var(--portfolios-heading-secondary-line-height, calc(var(--portfolios-heading-secondary-size, 14px) + 10px));
    font-weight: bold;
    letter-spacing: var(--portfolios-letter-spacing, 0.4px);
    color: var(--portfolios-heading-primary-color, inherit);
    text-align: inherit;
}

#portfolio_page #casting .casting-section-title :is(a, span, p, strong, em, b, i, small),
#portfolio_page .casting-home-block .casting-section-title :is(a, span, p, strong, em, b, i, small),
#portfolio_page #casting .casting-detail-label :is(a, span, p, strong, em, b, i, small),
#portfolio_page .casting-home-block .casting-detail-label :is(a, span, p, strong, em, b, i, small),
#portfolio_page #casting .casting-timeline-title :is(a, span, p, strong, em, b, i, small),
#portfolio_page .casting-home-block .casting-timeline-title :is(a, span, p, strong, em, b, i, small) {
    color: var(--portfolios-heading-primary-color, inherit);
}

#portfolio_page #casting .casting-timeline-category,
#portfolio_page .casting-home-block .casting-timeline-category {
    margin: 0 0 0.35rem;
    font-size: inherit;
    line-height: var(--portfolios-line-height-base);
    font-weight: bold;
    color: var(--portfolios-heading-secondary-color, inherit);
}

#portfolio_page #casting .casting-detail-summary,
#portfolio_page .casting-home-block .casting-detail-summary,
#portfolio_page #casting .casting-timeline-summary,
#portfolio_page .casting-home-block .casting-timeline-summary {
    margin: 0;
}

#portfolio_page #casting .casting-timeline-title + .casting-timeline-summary,
#portfolio_page .casting-home-block .casting-timeline-title + .casting-timeline-summary {
    margin-top: 0.35rem;
}

#portfolio_page #casting .casting-detail-label + .casting-detail-summary,
#portfolio_page .casting-home-block .casting-detail-label + .casting-detail-summary {
    margin-top: 0.35rem;
}

.casting-details {
    list-style: none;
    padding: 0;
    margin: 0;
}

.casting-detail {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.casting-block h3,
.casting-timeline-wrap h3 {
    margin-top: 0;
}

/* ----- Frise chronologique ----- */

.casting-timeline {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
}

.casting-timeline::before {
    content: "";
    position: absolute;
    top: 0.35rem;
    bottom: 0.35rem;
    left: 4.75rem;
    width: 2px;
    transform: translateX(-50%);
    background: var(--portfolios-ui-border-color, var(--portfolios-theme-border, var(--portfolios-color-border-custom, currentColor)));
    opacity: 0.45;
}

.casting-timeline-entry {
    position: relative;
    display: grid;
    grid-template-columns: 4.75rem minmax(0, 1fr);
    gap: 1.25rem;
    margin-bottom: 1.75rem;
}

.casting-timeline-entry:last-child {
    margin-bottom: 0;
}

.casting-timeline-axis {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding-right: 1.25rem;
    padding-top: 0.15rem;
}

.casting-timeline-year {
    font-size: var(--portfolios-heading-secondary-size, 14px);
    line-height: var(--portfolios-heading-secondary-line-height, calc(var(--portfolios-heading-secondary-size, 14px) + 10px));
    font-weight: var(--portfolios-font-weight-bold, 700);
    color: var(--portfolios-heading-primary-color, inherit);
}

.casting-timeline-year--nodate {
    opacity: 0.55;
}

.casting-timeline-dot {
    position: absolute;
    right: -0.45rem;
    top: 0.5rem;
    width: 0.85rem;
    height: 0.85rem;
    border-radius: var(--portfolios-border-radius-full, 50%);
    background: var(--portfolios-theme-bg-main, var(--portfolios-color-bg-main, #fafafa));
    border: 2px solid var(--portfolios-heading-primary-color, currentColor);
    box-sizing: border-box;
}

.casting-timeline-card {
    min-width: 0;
}

.card-list .casting-timeline-card,
.card-list .casting-block,
.card-list .casting-detail {
    padding-bottom: 15px;
}

.card-list .casting-timeline-card.border-design,
.card-list .casting-block.border-design,
.card-list .casting-detail.border-design {
    box-shadow: none;
}

.casting-timeline--preview .casting-timeline-entry {
    margin-bottom: 1.25rem;
}

@media screen and (max-width: 600px) {
    .casting-timeline::before {
        left: 3.5rem;
    }

    .casting-timeline-entry {
        grid-template-columns: 3.5rem minmax(0, 1fr);
        gap: 0.85rem;
    }

    .casting-timeline-axis {
        padding-right: 0.85rem;
    }

    .casting-timeline-dot {
        right: -0.4rem;
        width: 0.75rem;
        height: 0.75rem;
    }
}
}

/* assets/css/public/modules/experiences/experiences.css */
/* @layer-wrap:site.elements */
@layer site.elements {
/* Version: 20-09-2026-16-46 */
#portfolio_page :is(#experiences, #formations, .experiences-home-block, .formations-home-block) .about-timeline-title {
    margin: 0;
    padding: 0;
    font-size: var(--portfolios-heading-secondary-size, 14px);
    line-height: var(--portfolios-heading-secondary-line-height, calc(var(--portfolios-heading-secondary-size, 14px) + 10px));
    font-weight: bold;
    letter-spacing: var(--portfolios-letter-spacing, 0.4px);
    color: var(--portfolios-heading-primary-color, inherit);
    text-align: inherit;
}

#portfolio_page :is(#experiences, #formations, .experiences-home-block, .formations-home-block) .about-timeline-title :is(a, span, p, strong, em, b, i, small) {
    color: var(--portfolios-heading-primary-color, inherit);
}

#portfolio_page :is(#experiences, #formations, .experiences-home-block, .formations-home-block) .about-timeline-organization {
    margin: 0.35rem 0 0;
}

#portfolio_page :is(#experiences, #formations, .experiences-home-block, .formations-home-block) .about-timeline-type {
    color: var(--portfolios-heading-secondary-color, inherit);
}

#portfolio_page :is(#experiences, #formations, .experiences-home-block, .formations-home-block) .about-timeline-summary {
    margin: 0;
}

#portfolio_page :is(#experiences, #formations, .experiences-home-block, .formations-home-block) .about-timeline-card-body :is(p, h4) {
    overflow: visible;
    text-overflow: unset;
    white-space: normal;
}

#portfolio_page :is(#experiences, #formations, .experiences-home-block, .formations-home-block) .about-timeline-title + .about-timeline-summary,
#portfolio_page :is(#experiences, #formations, .experiences-home-block, .formations-home-block) .about-timeline-organization + .about-timeline-summary {
    margin-top: 0.35rem;
}

.about-timeline {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
}

.about-timeline::before {
    content: "";
    position: absolute;
    top: 0.35rem;
    bottom: 0.35rem;
    left: 4.75rem;
    width: 2px;
    transform: translateX(-50%);
    background: color-mix(in srgb, var(--portfolios-heading-secondary-color, currentColor) 35%, var(--portfolios-theme-border, currentColor));
    opacity: 0.55;
}

.about-timeline-entry {
    position: relative;
    display: grid;
    grid-template-columns: 4.75rem minmax(0, 1fr);
    gap: 1.25rem;
    margin-bottom: 1.75rem;
}

.about-timeline-entry:last-child {
    margin-bottom: 0;
}

.about-timeline-axis {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding-right: 1.25rem;
    padding-top: 0.15rem;
}

.about-timeline-year {
    font-size: var(--portfolios-heading-secondary-size, 14px);
    line-height: var(--portfolios-heading-secondary-line-height, calc(var(--portfolios-heading-secondary-size, 14px) + 10px));
    font-weight: var(--portfolios-font-weight-bold, 700);
}

/* Date en pastille : même réglage /theme que « Populaire » et les dates de l'agenda (Pastilles,
   design/matrices/base.css). Sans réglage, repli = couleur principale du site, texte « sur fond ». */
.about-timeline-year:not(.about-timeline-year--nodate) {
    --pf-badge-base: var(--portfolios-color-one, #222222);
    --pf-badge-base-on: var(--portfolios-button-text-color, #fff);
    display: inline-block;
    padding: calc(0.15em * var(--portfolios-badge-pad, 1)) calc(0.7em * var(--portfolios-badge-pad, 1));
    border-radius: var(--portfolios-badge-radius, 999px);
    background-color: var(--pf-badge-bg);
    box-shadow: inset 0 0 0 1px var(--pf-badge-line);
    /* Encre des réglages « Pastilles » (design/matrices/base.css), comme les dates de l'agenda. */
    color: var(--pf-badge-ink);
    font-size: var(--portfolios-badge-size, var(--portfolios-heading-secondary-size, 14px));
    text-transform: var(--portfolios-badge-transform);
}

.about-timeline-year--nodate {
    opacity: 0.55;
}

.about-timeline-dot {
    position: absolute;
    right: -0.45rem;
    top: 0.5rem;
    width: 0.85rem;
    height: 0.85rem;
    border-radius: var(--portfolios-border-radius-full, 50%);
    background: var(--portfolios-theme-bg-main, var(--portfolios-color-bg-main, #fafafa));
    border: 2px solid var(--portfolios-heading-primary-color, currentColor);
    box-sizing: border-box;
}

.about-timeline-card {
    min-width: 0;
}

.about-timeline-card-header {
    align-items: flex-start;
    gap: 1rem;
}

.about-timeline-card-header .about-artist-img {
    height: 80px;
    width: 80px;
    margin-right: 0;
    margin-bottom: 0;
    flex-shrink: 0;
}

.about-timeline-card-body {
    min-width: 0;
    flex: 1 1 auto;
}

.about-timeline-socials .social-medias {
    margin-bottom: 0;
}

.about-timeline--preview .about-timeline-entry {
    margin-bottom: 1.25rem;
}

.about-timeline--preview .about-timeline-entry:last-child {
    margin-bottom: 0;
}

.card-list .about-timeline-card {
    padding-bottom: 15px;
}

.card-list .about-timeline-card.border-design {
    box-shadow: none;
}

@media screen and (max-width: 600px) {
    .about-timeline::before {
        left: 3.5rem;
    }

    .about-timeline-entry {
        grid-template-columns: 3.5rem minmax(0, 1fr);
        gap: 0.85rem;
    }

    .about-timeline-axis {
        padding-right: 0.85rem;
    }

    .about-timeline-dot {
        right: -0.4rem;
        width: 0.75rem;
        height: 0.75rem;
    }

    .about-timeline-card-header .about-artist-img {
        height: 64px;
        width: 64px;
    }
}
}

/* assets/css/public/modules/formations/formations.css */
/* @layer-wrap:site.elements */
@layer site.elements {
/* Version: 20-09-2026-16-46 */
/* Réutilise les styles de frise définis dans experiences.css (chargé avant sur about.php) */
}

/* assets/css/public/modules/recommendations/recommendations.css */
/* @layer-wrap:site.elements */
@layer site.elements {
/* Version: 20-09-2026-16-46 */
#portfolio_page :is(#recommendations, .recommendations-home-block) .recommendation-card {
    color: var(--portfolios-body-text-color, var(--portfolios-text-main-color, inherit));
}

#portfolio_page :is(#recommendations, .recommendations-home-block) .recommendation-quote,
#portfolio_page :is(#recommendations, .recommendations-home-block) .recommendation-quote :is(p, span, em, strong, b, i) {
    color: var(--portfolios-body-text-color, var(--portfolios-text-main-color, inherit));
}

#portfolio_page :is(#recommendations, .recommendations-home-block) .recommendation-author,
#portfolio_page :is(#recommendations, .recommendations-home-block) .recommendation-author :is(cite, span, a),
#portfolio_page :is(#recommendations, .recommendations-home-block) .recommendation-author cite a:hover,
#portfolio_page :is(#recommendations, .recommendations-home-block) .recommendation-author cite a:focus-visible {
    color: var(--portfolios-heading-secondary-color, inherit);
}

/* Même écart que les cartes d'expériences / formations (grilles de base.css § 16) : les deux blocs s'alignent. */
.recommendations-grid {
    gap: var(--layout-gap, 20px);
}

.recommendation-card {
    margin: 0;
    min-height: 0;
}

.recommendation-card-header {
    align-items: flex-start;
    gap: 1rem;
}

.recommendation-card-header .about-artist-img.recommendation-author-photo {
    height: 80px;
    width: 80px;
    margin-right: 0;
    margin-bottom: 0;
    flex-shrink: 0;
}

.recommendation-card-body {
    min-width: 0;
    flex: 1 1 auto;
}

.recommendation-quote {
    margin: 0;
    font-style: italic;
}

.recommendation-quote::before {
    content: "\201C";
}

.recommendation-quote::after {
    content: "\201D";
}

.recommendation-author {
    margin-top: 0.75rem;
    padding-top: 0;
    font-size: calc(var(--portfolios-font-size-base) * 0.95);
}

.recommendation-author cite {
    font-style: normal;
    font-weight: var(--portfolios-font-weight-bold, 700);
}

.recommendation-year {
    color: inherit;
    opacity: 0.85;
}

.card-list .recommendation-card.border-design {
    box-shadow: none;
}

@media screen and (max-width: 600px) {
    .recommendation-card-header .about-artist-img.recommendation-author-photo {
        height: 64px;
        width: 64px;
    }
}
}

/* assets/css/public/modules/photos/gallery.css */
/* @layer-wrap:site.elements */
@layer site.elements {
/* Version: 08-10-2026-square */
/* Grille module « Galerie » (albums) + grille photos sur fiche production (id dédié pour éviter la confusion avec le lien Galerie du menu) */
#gallery,
#production-show-photos-grid {
	width: 100%;
	max-width: 100%;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	grid-template-rows: auto;
	grid-gap: var(--layout-gap, 20px); /* densité des images : design/elements/options.css */
	overflow-x: clip;
}

@media screen and (max-width: 1439px) and (min-width: 901px) {
  #gallery,
  #production-show-photos-grid {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

#gallery a,
#production-show-photos-grid a {
  position: relative;
  /* Tuile carrée qui remplit sa cellule, image recadrée (comme les pochettes) */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
  width: 100%;
  min-width: 0;
  height: auto;
  aspect-ratio: 1 / 1;
  padding: 0;
  box-sizing: border-box;
  transition:
    box-shadow 0.3s ease-in-out,
    border 0.3s ease-in-out,
    filter 0.3s ease-in-out,
    transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.2s linear;
}

#gallery a:hover,
#production-show-photos-grid a:hover {
  transform: var(--portfolios-thumbnail-hover-transform, none);
  filter: var(--portfolios-thumbnail-hover-filter, brightness(100%));
}

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

#gallery a::after,
#production-show-photos-grid a::after {
  position: absolute;
  top: 0;
  content: "↕";
  height: 100%;
  width: 100%;
  font-size: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: 0.2s linear;
  color: var(--modules-white);
}

#gallery a:hover::after,
#production-show-photos-grid a:hover::after {
  bottom: 0px;
  opacity: 1;
}

#gallery div,
#gallery a,
#production-show-photos-grid div,
#production-show-photos-grid a {
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
}

#gallery a img,
#production-show-photos-grid a img {
  display: none;
}

@media screen and (max-width: 900px) {

  #gallery,
  #production-show-photos-grid {
    grid-template-columns: 1fr 1fr;
  }

}

/* Accueil : 2 lignes selon les colonnes (la page Galerie affiche tout) */
@media screen and (max-width: 620px) {
  #portfolio_page #home-section-gallery #gallery > :nth-child(n+3) {
    display: none;
  }
}

@media screen and (min-width: 621px) and (max-width: 900px) {
  #portfolio_page #home-section-gallery #gallery > :nth-child(n+5) {
    display: none;
  }
}

@media screen and (min-width: 901px) and (max-width: 1439px) {
  #portfolio_page #home-section-gallery #gallery > :nth-child(n+7) {
    display: none;
  }
}

@media screen and (max-width: 620px) {

  #gallery,
  #production-show-photos-grid {
    grid-template-columns: 1fr 1fr;
    grid-gap: calc(var(--layout-gap, 20px) / 2);
  }

}
}

/* assets/css/public/modules/agenda/agenda.css */
/* @layer-wrap:site.elements */
@layer site.elements {
/* Version: 09-10-2026-card-ink */
/* Fond = « Couleur de fond des contenus » du générateur, sinon fond du site. */
#portfolio_page #agenda-list .agenda-item {
    background: var(--portfolios-content-bg-color, var(--portfolios-theme-bg-main, #272727));
}

.agenda-item {
    display: flex;
	margin-bottom: calc(25px * var(--pf-density-gap, 1));
	padding: calc(25px * var(--pf-density-pad, 1));
    transition: 0.2s linear;
    position: relative;
    font-family: var(--portfolios-font-name), var(--portfolios-font-stack, sans-serif);
}

.card-list .agenda-item {
    padding: 0px 0px 15px 0px;
}

.agenda-item:last-child {
    margin-bottom: 0px;
}

.agenda-item .date {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-width: 150px;
    min-height: 150px;
    margin-right: 35px;
    padding: 20px;
    transition: 0.2s linear;
}

/* Pavé daté : couleur principale, réglable dans /theme (Pastilles, design/matrices/base.css).
   Les thèmes d'agenda sans fond (liste, journal…) l'écrasent par des sélecteurs plus précis. */
#portfolio_page .agenda-item .date {
    --pf-badge-base: var(--portfolios-color-one, #222222);
    --pf-badge-base-on: var(--portfolios-button-text-color, #fff);
    padding: calc(20px * var(--portfolios-badge-pad, 1));
    border-radius: var(--portfolios-badge-radius, 0);
    background-color: var(--pf-badge-bg);
    box-shadow: inset 0 0 0 1px var(--pf-badge-line);
    /* Taille et casse des pastilles : sans réglage, la variable est invalide et la valeur héritée reste. */
    font-size: var(--portfolios-badge-size);
    text-transform: var(--portfolios-badge-transform);
}

@media screen and (max-width: 1080px) {

    .agenda-item .date {
        min-width: 100px;
        min-height: 100px;
    }

}

@media screen and (max-width: 500px) {

    .agenda-item {
        flex-direction: column;
    }

    .agenda-item .date {
        margin: 0px 0px 20px 0px;
        text-align: left;
        align-items: flex-start;
    }
}

.agenda-item .date .date-day {
    font-weight: bold;
}

.agenda-item .date .date-month {
    font-weight: bold;
}

/* Texte du pavé daté : couleur du texte des boutons (contraste avec la couleur principale). */
#portfolio_page .agenda-item .date,
#portfolio_page .agenda-item .date p {
    color: var(--pf-badge-ink, var(--portfolios-button-text-color, #fff));
}

#portfolio_page .agenda-item ul li:not(.date),
#portfolio_page .agenda-item ul li:not(.date) span {
    font-family: inherit;
    font-size: var(--portfolios-font-size-base);
    line-height: var(--portfolios-text-line-height);
    color: var(--portfolios-text-main-color, inherit);
}

#portfolio_page .agenda-item ul li:not(.date) :is(h2, h3) {
    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(--pf-card-title, var(--portfolios-content-title-color, var(--portfolios-heading-secondary-color, var(--portfolios-text-main-color, inherit))));
    margin: 0;
    padding: 0;
    text-align: left;
}

#portfolio_page .agenda-item ul li:not(.date) :is(h2, h3) :is(a, span, p, strong, em, b, i, small) {
    color: inherit;
}

.agenda-item h2,
.agenda-item h3 {
    margin: 0px;
    padding: 0px;
    text-align: left;
}

.agenda-item .agenda-item-description {
    font-weight: bold;
    margin-bottom: 30px;
}

.agenda-item ul li:not(.date) {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 15px;
    font-weight: normal;
}

.agenda-item ul li svg {
    width: 25px;
    margin-right: 15px;
    flex-shrink: 0;
}

.agenda-item ul li:not(.date) p {
    margin: 0px;
    font-size: var(--portfolios-font-size-base);
    line-height: var(--portfolios-text-line-height);
}

.agenda-item .agenda-item-open {
    position: absolute;
    right: 35px;
    bottom: 35px;
  
}

.agenda-item .agenda-item-open svg {
    width: 25px;
    transition: 0.2s linear;
}

@media screen and (max-width: 500px) {

    .agenda-item .agenda-item-open svg {
        margin-right: 10px;
    }

}

.agenda-item:hover .agenda-item-open svg {
    opacity: 0.6;
}
}

/* assets/css/public/modules/blog/blog.css */
/* @layer-wrap:site.elements */
@layer site.elements {
/* Version: 09-10-2026-card-ink */
.blog-list {
    width: 100%;
    margin: 0 auto;
    display: grid;
    grid-template-rows: auto;
    /* Écart réglé par la densité des articles (design/elements/options.css, --layout-gap du conteneur). */
    grid-gap: var(--layout-gap, 20px);
}

/* Vignettes blog — typo et métadonnées (variables thème portfolio) */
#portfolio_page main .thumbnail .article-blog-infos,
#portfolio_page main .thumbnail-tile .article-blog-infos {
    gap: 0.65rem;
}

#portfolio_page main .thumbnail .article-blog-infos__title,
#portfolio_page main .thumbnail-tile .article-blog-infos__title {
    font-size: var(--portfolios-heading-secondary-size, 14px);
    line-height: var(--portfolios-heading-secondary-line-height, calc(var(--portfolios-heading-secondary-size, 14px) + 10px));
    font-weight: bold;
    color: var(--pf-card-title, var(--portfolios-content-title-color, var(--portfolios-heading-primary-color, var(--portfolios-text-main-color, inherit))));
    margin: 0;
    padding: 0;
    text-align: inherit;
}

#portfolio_page main .thumbnail .article-blog-infos__meta,
#portfolio_page main .thumbnail-tile .article-blog-infos__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    /* Taille : structure/layout/reading.css (couche « typo ») l'impose sur toutes les listes ; ici la valeur de base. */
    font-size: var(--portfolios-font-size-meta);
    line-height: calc(0.75rem + 8px);
    color: var(--portfolios-heading-secondary-color, var(--portfolios-text-main-color, inherit));
    opacity: 0.9;
}

#portfolio_page main .thumbnail .article-blog-infos__date,
#portfolio_page main .thumbnail-tile .article-blog-infos__date {
    font-style: normal;
    letter-spacing: 0.02em;
}

#portfolio_page main .thumbnail .article-blog-infos__category,
#portfolio_page main .thumbnail-tile .article-blog-infos__category {
    /* Pastille : même réglage /theme que « Populaire » et les dates (Pastilles, design/matrices/base.css). */
    --pf-badge-base: var(--portfolios-button-background-color, #222);
    --pf-badge-base-on: var(--portfolios-button-text-color, #fff);
    display: inline-block;
    padding: calc(0.12em * var(--portfolios-badge-pad, 1)) calc(0.55em * var(--portfolios-badge-pad, 1));
    border-radius: var(--portfolios-badge-radius, var(--portfolios-button-radius, var(--portfolios-border-radius-custom, 4px)));
    background: var(--pf-badge-bg);
    color: var(--pf-badge-ink);
    border: none;
    box-shadow: inset 0 0 0 1px var(--pf-badge-line);
    font-family: var(--portfolios-button-font-family, inherit);
    font-size: var(--portfolios-font-size-small);
    line-height: calc(0.68rem + 6px);
    letter-spacing: var(--portfolios-button-letter-spacing, 0.04em);
    text-transform: var(--portfolios-button-text-transform, none);
    font-weight: var(--portfolios-button-font-weight, 600);
}

#portfolio_page main .thumbnail .article-blog-infos__description,
#portfolio_page main .thumbnail-tile .article-blog-infos__description {
    flex: 1;
    margin: 0;
    font-size: calc(var(--portfolios-font-size-base, 14px) * 0.875);
    line-height: calc(var(--portfolios-text-line-height) * 0.875);
    color: var(--portfolios-text-main-color, inherit);
    opacity: 0.92;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
}

/* assets/css/public/modules/informations/informations.css */
@layer site.elements {
/* Version: 18-10-2026-illustration-variable */
.informations-list {
    width: 100%;
}

.information-item {
    display: block;
    padding: 0;
}

/* Grille (« Comme les articles » quand les articles sont en grille) : même carte que les articles,
   l'agenda et les services en grille — fond des contenus, contour, arrondi, ombre, survol et clic
   du générateur. Les autres styles sont habillés comme tous les contenus (design/matrices/base.css,
   section 15). */
.informations-list:not([data-informations-layout]) .information-item,
.informations-list[data-informations-layout="grid"] .information-item {
    box-sizing: border-box;
    padding: 20px;
    border-width: var(--portfolios-thumbnail-border-width, 0px);
    border-style: var(--portfolios-thumbnail-border-type, solid);
    border-color: var(--portfolios-thumbnail-border-color, #222);
    border-radius: var(--portfolios-thumbnail-radius, 0%);
    box-shadow: var(--portfolios-thumbnail-box-shadow, none);
    background-color: var(--portfolios-content-bg-color, var(--portfolios-bg-alt-color, transparent));
    color: var(--pf-text, var(--portfolios-content-text-color, inherit));
    text-decoration: none;
    transition: box-shadow 0.3s ease-in-out, filter 0.3s ease-in-out, transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Titre / texte lisibles sur le fond des contenus. #portfolio_page : « #portfolio_page * » pose la couleur
   du thème sur chaque élément, une règle sans identifiant ne passait pas. */
#portfolio_page .informations-list:is(:not([data-informations-layout]), [data-informations-layout="grid"]) .information-item__title {
    color: var(--pf-title, var(--portfolios-content-title-color, inherit));
}

#portfolio_page .informations-list:is(:not([data-informations-layout]), [data-informations-layout="grid"]) .information-item__description,
#portfolio_page .informations-list:is(:not([data-informations-layout]), [data-informations-layout="grid"]) .information-item__description :is(p, span, li, strong, em) {
    color: var(--pf-text, var(--portfolios-content-text-color, inherit));
}

.informations-list:not([data-informations-layout]) a.information-item:hover,
.informations-list[data-informations-layout="grid"] a.information-item:hover {
    transform: var(--portfolios-thumbnail-hover-transform, none);
    filter: var(--portfolios-thumbnail-hover-filter, brightness(100%));
}

.informations-list:not([data-informations-layout]) a.information-item:active,
.informations-list[data-informations-layout="grid"] a.information-item:active {
    transform: var(--portfolios-thumbnail-click-transform, none);
    transition: transform 0.1s ease;
}

.information-item__illustration {
    display: block;
    /* Largeur réglée par fiche (--pf-info-illu-w, posée par le template) ; jamais plus large que la carte. */
    width: var(--pf-info-illu-w, auto);
    max-width: min(100%, var(--pf-info-illu-w, 100%));
    height: auto;
    margin-bottom: 0.75rem;
    border: none;
    background: none;
}

/* Illustration « reprend le design » : l'arrondi des vignettes. Le contour et l'ombre sont ceux de la
   carte (un seul contour, comme les autres éléments). */
.information-item__illustration.information-item__illustration--inherit-design {
    box-sizing: border-box;
    border-radius: var(--portfolios-thumbnail-radius, 0%);
}

.information-item__title {
    /* Marges latérales laissées à l'alignement des titres (core/fonts.css, .title-align-*). */
    margin-block: 0;
}

.information-item__title a {
    color: inherit;
    text-decoration: none;
}

.information-item__title a:hover {
    text-decoration: underline;
}

.information-item__description {
    margin-top: 0.5rem;
}

}
/* assets/css/public/modules/surveys/surveys.css */
/* @layer-wrap:site.elements */
@layer site.elements {
/* Version: 06-10-2026-12-00 */
/* Vignettes enquêtes — bouton ouvrant la modale (reset UA sans casser thumb-border / thème) */
#portfolio_page .survey-open-modal.thumbnail-tile {
    width: 100%;
    margin: 0;
    padding: 0;
    font: inherit;
    color: inherit;
    text-align: start;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}

#portfolio_page .thumbnail .survey-open-modal {
    display: block;
    width: 100%;
    text-align: start;
    padding: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}

/* Vignettes enquêtes : icône formulaire au survol (à la place du ¶ des contenus) */
#portfolio_page .survey-open-modal .thumb::after {
    content: "";
    font-size: 0;
    background-color: var(--portfolios-text-main-color, var(--modules-white, #fff));
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='3' width='14' height='18' rx='2'/%3E%3Cpath d='M9 7h6M9 11h6M9 15h4'/%3E%3C/svg%3E");
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: 2.35rem 2.35rem;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='3' width='14' height='18' rx='2'/%3E%3Cpath d='M9 7h6M9 11h6M9 15h4'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: 2.35rem 2.35rem;
}

/* Modale plein écran — fond et fermer partagés avec swipebox.css (#photo-viewer) */
#survey-response-modal .survey-modal__scroll {
    flex: 1 1 0;
    width: 100%;
    min-height: 0;
    max-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
}

#survey-response-modal .survey-modal__content {
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;
    text-align: left;
}

#survey-response-modal #survey-modal-form[hidden],
#survey-response-modal #survey-modal-form.survey-modal__panel--hidden {
    display: none;
}

#survey-response-modal #survey-modal-readonly[hidden],
#survey-response-modal #survey-modal-readonly.survey-modal__panel--hidden {
    display: none;
}

#survey-response-modal .survey-modal__legal[hidden],
#survey-response-modal .survey-modal__legal.survey-modal__panel--hidden {
    display: none;
}

#survey-response-modal .survey-modal__stage {
    align-items: stretch;
    text-align: left;
}

#survey-response-modal .survey-modal__title,
#survey-response-modal .survey-modal__title.title-align-left,
#survey-response-modal .survey-modal__title.title-align-center,
#survey-response-modal .survey-modal__title.title-align-right {
    margin: 0 0 1rem;
    font-size: var(--portfolios-heading-primary-size, 21px);
    line-height: var(--portfolios-heading-primary-line-height, calc(var(--portfolios-heading-primary-size, 21px) + 2px));
    font-weight: bold;
    color: var(--portfolios-heading-primary-color, inherit);
    text-align: left;
    align-self: stretch;
    width: 100%;
}

#portfolio_page #home-section-surveys .survey-open-modal .article-blog-infos,
#portfolio_page #home-section-surveys .survey-open-modal .article-blog-infos__title,
#portfolio_page #home-section-surveys .survey-open-modal .article-blog-infos__meta,
#portfolio_page #home-section-surveys .survey-open-modal .article-blog-infos__description {
    text-align: left;
}

#portfolio_page #home-section-surveys .survey-open-modal.thumbnail-tile,
#portfolio_page #home-section-surveys .thumbnail .survey-open-modal {
    align-items: flex-start;
}

/* Contenu du questionnaire : tout à gauche, sur la largeur du formulaire,
   y compris les alignements writer (writer-align-*) et title-align-* du thème. */
#survey-response-modal .survey-modal__fields.content-article,
#survey-response-modal .survey-modal__fields.content-article :is(
    h2, h3, h4, h5, h6,
    p, .writer-editable, hr.writer-separator,
    a, .survey-modal__link, .survey-modal__choice-hint
) {
    text-align: left;
}

#survey-response-modal .survey-modal__fields.content-article .contact-form__field {
    align-items: flex-start;
    text-align: left;
}

/* Intertitres et blocs de contenu : enfants de chaque exemplaire
   (fieldset .survey-modal__entry), pas de la liste elle-même. Même largeur et
   même départ que les champs ; la marge haute générique de .content-article h2
   (45px) est ramenée au rythme du formulaire. */
#survey-response-modal .survey-modal__entry > :is(h2, h3, h4) {
    width: 100%;
    margin: 0.75rem 0 1.25rem;
    padding: 0;
}

#survey-response-modal .survey-modal__entry > :is(hr, p.description) {
    margin-bottom: 1.25rem;
}

#survey-response-modal .survey-modal__message--error {
    color: var(--portfolios-color-error, #b00020);
}

#survey-response-modal .survey-modal__legal,
#survey-response-modal .survey-modal__legal p {
    font-size: var(--portfolios-font-size-base, 14px);
    line-height: var(--portfolios-text-line-height, calc(1em + 10px));
}

#survey-response-modal .survey-modal__submit-warning {
    margin: 0;
    font-size: var(--portfolios-font-size-base, 14px);
    line-height: var(--portfolios-text-line-height, calc(1em + 10px));
}

#survey-response-modal .survey-modal__identity-otp {
    margin-bottom: 1.5rem;
    padding: 0.75rem 0 0;
    border-top: 1px solid color-mix(in srgb, var(--portfolios-ui-border-strong-color, rgba(127, 127, 127, 0.35)) 35%, transparent);
}

#survey-response-modal .survey-modal__identity-otp-hint {
    margin: 0 0 0.75rem;
    font-size: calc(var(--portfolios-font-size-base) * 0.88);
    line-height: 1.4;
    color: color-mix(in srgb, var(--portfolios-text-main-color, inherit) 65%, transparent);
}

#survey-response-modal .contact-form .contact-form__field,
#survey-response-modal .survey-modal__fields .contact-form__field {
    margin-bottom: 1.5rem;
    gap: 0.55rem;
}

#survey-response-modal .contact-form__label {
    text-align: left;
    align-self: stretch;
    width: 100%;
}

#survey-response-modal .contact-form__control[readonly] {
    cursor: default;
    opacity: 0.75;
}

#survey-response-modal .contact-form__field .survey-modal__link {
    display: inline-block;
    line-height: var(--portfolios-text-line-height, calc(1em + 10px));
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

#survey-response-modal .survey-modal__readonly-intro {
    margin: 0 0 1.5rem;
    font-weight: bold;
    font-size: var(--portfolios-heading-secondary-size, 14px);
    line-height: var(--portfolios-heading-secondary-line-height, calc(1em + 6px));
    color: var(--portfolios-heading-secondary-color, inherit);
    text-align: left;
}

#survey-response-modal .survey-modal__readonly-content {
    margin-top: 0.25rem;
}

#survey-response-modal .survey-modal__readonly-success {
    margin: 0 0 1rem;
    text-align: left;
}

#survey-response-modal .survey-modal__readonly-success:not([hidden]) {
    margin-top: 0.75rem;
}

#survey-response-modal .survey-modal__responses-date {
    margin: 0 0 1rem;
    font-size: calc(var(--portfolios-font-size-base) * 0.88);
    line-height: 1.4;
    text-align: left;
    color: color-mix(in srgb, var(--portfolios-text-main-color, inherit) 65%, transparent);
}

#survey-response-modal .survey-modal__responses-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin: 0 0 1.25rem;
    padding: 0.75rem 0;
    border-top: 1px solid color-mix(in srgb, var(--portfolios-ui-border-strong-color, rgba(127, 127, 127, 0.35)) 35%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--portfolios-ui-border-strong-color, rgba(127, 127, 127, 0.35)) 35%, transparent);
}

#survey-response-modal .survey-modal__responses-counter {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-size: calc(var(--portfolios-font-size-base) * 0.95);
    line-height: 1.4;
    font-weight: bold;
    text-align: center;
    color: var(--portfolios-heading-primary-color, inherit);
}

#survey-response-modal .survey-modal__responses-bar .pv-prev,
#survey-response-modal .survey-modal__responses-bar .pv-next {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 3rem;
    height: 3rem;
    padding: 0;
    border: var(--portfolios-button-border-width, 0px) var(--portfolios-button-border-type, solid) var(--portfolios-button-border-color, transparent);
    border-radius: var(--portfolios-button-radius, var(--portfolios-border-radius-full));
    box-shadow: var(--portfolios-button-box-shadow, none);
    background-color: var(--portfolios-button-background-color, #222);
    background-image: var(--portfolios-button-gradient, none);
    cursor: pointer;
    color: var(--portfolios-button-text-color, #fff);
    box-sizing: border-box;
    transition: box-shadow 0.2s, border 0.2s, background 0.2s, color 0.2s, filter 0.18s, transform 0.18s;
}

#survey-response-modal .survey-modal__responses-bar .pv-prev.pv-rotate-left svg {
    transform: rotate(-90deg);
}

#survey-response-modal .survey-modal__responses-bar .pv-next.pv-rotate-right svg {
    transform: rotate(90deg);
}

#survey-response-modal .survey-modal__responses-bar .pv-prev.disabled,
#survey-response-modal .survey-modal__responses-bar .pv-next.disabled,
#survey-response-modal .survey-modal__responses-bar .pv-prev:disabled,
#survey-response-modal .survey-modal__responses-bar .pv-next:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
}

#survey-response-modal .survey-modal__summary {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

#survey-response-modal .survey-modal__summary-block {
    padding: 1rem;
    border-style: solid;
    border-width: var(--contact-control-border-width, 2px);
    border-color: var(--contact-control-border-color, var(--portfolios-ui-border-strong-color, rgba(127, 127, 127, 0.35)));
    border-radius: var(--portfolios-thumbnail-radius, 0%);
    background-color: var(--form-bg, var(--portfolios-theme-bg-main));
}

#survey-response-modal .survey-modal__summary-title {
    margin: 0 0 0.75rem;
    font-size: calc(var(--portfolios-font-size-base) * 0.95);
    line-height: 1.35;
    font-weight: bold;
    text-align: left;
    color: var(--portfolios-heading-primary-color, inherit);
}

#survey-response-modal .survey-modal__summary-list {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

#survey-response-modal .survey-modal__summary-item {
    margin: 0;
    padding: 0 0 0.65rem;
    border-bottom: 1px solid color-mix(in srgb, var(--portfolios-ui-border-strong-color, rgba(127, 127, 127, 0.35)) 25%, transparent);
}

#survey-response-modal .survey-modal__summary-item:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

#survey-response-modal .survey-modal__summary-item dt {
    margin: 0 0 0.2rem;
    font-weight: bold;
    font-size: calc(var(--portfolios-font-size-base) * 0.88);
    line-height: 1.35;
    text-align: left;
    color: color-mix(in srgb, var(--portfolios-text-main-color, inherit) 72%, transparent);
}

#survey-response-modal .survey-modal__summary-item dd {
    margin: 0;
    line-height: 1.45;
    text-align: left;
    overflow-wrap: break-word;
    word-break: break-word;
}

#survey-response-modal .survey-modal__readonly-actions {
    margin-top: 1.25rem;
}

/* Choix simples / multiples — cartes cliquables alignées sur contact-form */
:is(#portfolio_page, #survey-response-modal) .survey-modal__choice-grid,
:is(#portfolio_page, #survey-response-modal) .content-article .survey-modal__choice-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
    grid-auto-rows: 1fr;
    gap: 0.5rem;
}

:is(#portfolio_page, #survey-response-modal) .survey-modal__choice-grid > li,
:is(#portfolio_page, #survey-response-modal) .content-article .survey-modal__choice-grid > li {
    list-style: none;
    margin: 0;
    padding: 0;
    margin-left: 0;
    margin-bottom: 0;
    line-height: inherit;
    display: flex;
    height: 100%;
}

:is(#portfolio_page, #survey-response-modal) .survey-modal__choice-grid > li::marker {
    content: none;
}

:is(#portfolio_page, #survey-response-modal) .survey-modal__choice-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: var(--contact-control-padding-y, 0.75rem) var(--contact-control-padding-x, 0.75rem);
    cursor: pointer;
    font: inherit;
    color: inherit;
    text-align: center;
    background-color: var(--form-bg, var(--portfolios-theme-bg-main));
    border-style: solid;
    border-width: var(--contact-control-border-width, 2px);
    border-color: var(--contact-control-border-color, var(--portfolios-ui-border-strong-color, rgba(127, 127, 127, 0.35)));
    border-radius: var(--portfolios-thumbnail-radius, 0%);
    box-shadow: none;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, background-color 0.2s ease;
}

:is(#portfolio_page, #survey-response-modal) .survey-modal__choice-card:hover {
    border-color: var(--portfolios-heading-primary-color, var(--contact-control-border-color));
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--portfolios-heading-primary-color, var(--contact-control-border-color)) 18%, transparent);
}

:is(#portfolio_page, #survey-response-modal) .survey-modal__choice-card--selected {
    border-color: var(--portfolios-heading-primary-color, var(--contact-control-border-color));
    background: color-mix(in srgb, var(--portfolios-heading-primary-color, #6d42c3) 8%, var(--form-bg, var(--portfolios-theme-bg-main)));
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--portfolios-heading-primary-color, #6d42c3) 22%, transparent);
}

:is(#portfolio_page, #survey-response-modal) .survey-modal__choice-card input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    clip: rect(0, 0, 0, 0);
    overflow: hidden;
    white-space: nowrap;
}

:is(#portfolio_page, #survey-response-modal) .survey-modal__choice-card::before {
    content: "";
    display: block;
    flex-shrink: 0;
    width: 1.1rem;
    height: 1.1rem;
    box-sizing: border-box;
    border: 2px solid color-mix(in srgb, currentColor 42%, transparent);
    background: color-mix(in srgb, var(--form-bg, var(--portfolios-theme-bg-main)) 35%, transparent);
    opacity: 0.55;
    transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}

:is(#portfolio_page, #survey-response-modal) .survey-modal__choice-card--radio::before {
    border-radius: 50%;
}

:is(#portfolio_page, #survey-response-modal) .survey-modal__choice-card--checkbox::before {
    border-radius: calc(var(--portfolios-border-radius-s, 4px) * 0.5);
}

:is(#portfolio_page, #survey-response-modal) .survey-modal__choice-card--selected::before {
    opacity: 1;
    border-color: var(--portfolios-heading-primary-color, #6d42c3);
    background: var(--portfolios-heading-primary-color, #6d42c3);
    box-shadow: inset 0 0 0 2px var(--form-bg, #fff);
}

:is(#portfolio_page, #survey-response-modal) .survey-modal__choice-text {
    flex: 0 1 auto;
    width: 100%;
    min-width: 0;
    line-height: 1.35;
    text-align: center;
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
}

:is(#portfolio_page, #survey-response-modal) .contact-form__field--choice-invalid .survey-modal__choice-card,
:is(#portfolio_page, #survey-response-modal) .contact-form__field:has(.survey-modal__choice-group[data-required="true"]:not(:has(:checked))) .survey-modal__choice-card {
    border-color: var(--form-error);
    box-shadow: none;
}

:is(#portfolio_page, #survey-response-modal) .contact-form__field--valid:has(.survey-modal__choice-grid) .survey-modal__choice-card--selected {
    border-color: var(--portfolios-heading-primary-color, var(--contact-control-border-color));
}

:is(#portfolio_page, #survey-response-modal) .contact-form__field:has(.survey-modal__choice-grid) {
    align-items: stretch;
}

:is(#portfolio_page, #survey-response-modal) .contact-form__field:has(.survey-modal__choice-grid) .survey-modal__choice-grid {
    width: 100%;
}

:is(#portfolio_page, #survey-response-modal) .survey-modal__choice-hint {
    margin: 0;
    font-size: calc(var(--portfolios-font-size-base) * 0.88);
    line-height: 1.4;
    text-align: left;
    color: color-mix(in srgb, var(--portfolios-text-main-color, inherit) 65%, transparent);
}

#survey-response-modal .contact-form__actions {
    align-items: flex-start;
}

#survey-response-modal #survey-submit-btn:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

@media screen and (max-width: 650px) {
    #survey-response-modal .contact-form__row.pf-cols-2 {
        grid-template-columns: 1fr;
    }

    :is(#portfolio_page, #survey-response-modal) .survey-modal__choice-grid,
    :is(#portfolio_page, #survey-response-modal) .content-article .survey-modal__choice-grid {
        grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr));
    }
}

/* E-mail isolé en tête : mention invitation. */
#survey-response-modal .survey-modal__email-note {
    margin: 0.5rem 0 0;
    font-size: 0.875em;
    opacity: 0.75;
}

/* Choix du nombre de personnes (enquêtes à réponses multiples). */
#survey-response-modal .survey-modal__count {
    margin-bottom: 1.5rem;
}
#survey-response-modal .survey-modal__count-control {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
}
#survey-response-modal .survey-modal__count-btn {
    min-width: 2.5rem;
    padding-inline: 0.75rem;
}
#survey-response-modal .survey-modal__count-value {
    min-width: 2ch;
    text-align: center;
    font-weight: 600;
}

/* Exemplaires : un fieldset par personne ; titre et cadre seulement s'il y en a plusieurs. */
#survey-response-modal .survey-modal__entry {
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
}
#survey-response-modal .survey-modal__entry-title {
    display: none;
}
#survey-response-modal .survey-modal__fields--multi .survey-modal__entry {
    padding: 1.25rem;
    margin-bottom: 1.5rem;
    border: 1px solid currentColor;
    border-color: color-mix(in srgb, currentColor 20%, transparent);
    border-radius: 0.75rem;
}
#survey-response-modal .survey-modal__fields--multi .survey-modal__entry-title {
    display: block;
    padding: 0 0.5rem;
    font-weight: 600;
}
}

/* assets/css/public/design/home/section-layout.css */
/* @layer-wrap:site.elements */
@layer site.elements {
/* Version: 19-10-2026-behind-edge */
/* Version: 02-09-2026-22-45 — mobile : gauche/droite → dessus/dessous */
.hero-layout,
.feature-layout {
    width: 100%;
}

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

/* Espacement vertical uniforme (haut = bas) — au niveau section pour fond pleine largeur.
   --pf-hero-offset : place du header fixe au-dessus du hero (posée par themes/basic/header.css), 0 sinon. */
#portfolio_page #hero.hero-layout:not(.hero-layout--image-behind),
section.home-feature-vedette.feature-layout:not(.feature-layout--image-behind) {
    padding-top: calc(var(--pf-hero-offset, 0px) + var(--hero-padding-block, 45px));
    padding-bottom: var(--hero-padding-block, 45px);
}

section.home-feature-vedette.feature-layout:not(.feature-layout--image-behind) {
    padding-top: var(--feature-padding-block, var(--hero-padding-block, 45px));
    padding-bottom: var(--feature-padding-block, var(--hero-padding-block, 45px));
}

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

.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 (+ place du header fixe, --pf-hero-offset) */
.hero-layout--image-behind #title-home #home-about,
.feature-layout--image-behind #title-feature #feature-about {
    padding-top: calc(var(--pf-hero-offset, 0px) + var(--hero-padding-block, 45px));
    padding-bottom: var(--hero-padding-block, 45px);
}

.feature-layout--image-behind #title-feature #feature-about {
    padding-top: var(--feature-padding-block, var(--hero-padding-block, 45px));
    padding-bottom: var(--feature-padding-block, var(--hero-padding-block, 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-inline: 0;
    margin-inline: 0;
    width: 100%;
    max-width: 100%;
}

/* Largeur du contenu — pilotée par hero-layout--content-full|limited (pas .pf-w-wide utilitaire) */
/* Pas de padding-inline ici : la section (#hero / .home-feature-vedette) porte déjà .pf-pad-x-md (20px) — sinon le contenu se retrouve avec 40px de marge latérale au lieu de 20px */
/* « Pleine largeur » reste plafonnée à --layout-width-wide (comme #footer-main et le reste du site) — pas de max-width: none */
.hero-layout--content-full:not(.hero-layout--image-behind) #title-home,
.feature-layout--content-full:not(.feature-layout--image-behind) #title-feature,
#portfolio_page #hero.hero-layout--content-full:not(.hero-layout--image-behind) #title-home,
#portfolio_page section.home-feature-vedette.feature-layout--content-full:not(.feature-layout--image-behind) #title-feature {
    max-width: var(--layout-width-wide);
    width: 100%;
    margin-inline: auto;
    box-sizing: border-box;
}

.hero-layout--content-limited:not(.hero-layout--image-behind) #title-home,
.feature-layout--content-limited:not(.feature-layout--image-behind) #title-feature,
#portfolio_page #hero.hero-layout--content-limited:not(.hero-layout--image-behind) #title-home,
#portfolio_page section.home-feature-vedette.feature-layout--content-limited:not(.feature-layout--image-behind) #title-feature {
    max-width: var(--layout-width-content);
    width: 100%;
    margin-inline: auto;
    box-sizing: border-box;
}

/* Annule .pf-w-wide / .pf-w-content globaux si encore présents sur le conteneur grid */
.hero-layout--content-full:not(.hero-layout--image-behind) #title-home:is(.pf-w-wide, .pf-w-content),
.feature-layout--content-full:not(.feature-layout--image-behind) #title-feature:is(.pf-w-wide, .pf-w-content),
#portfolio_page #hero.hero-layout--content-full:not(.hero-layout--image-behind) #title-home:is(.pf-w-wide, .pf-w-content),
#portfolio_page section.home-feature-vedette.feature-layout--content-full:not(.feature-layout--image-behind) #title-feature:is(.pf-w-wide, .pf-w-content) {
    max-width: var(--layout-width-wide);
    margin-inline: auto;
}

.hero-layout--content-limited:not(.hero-layout--image-behind) #title-home:is(.pf-w-wide, .pf-w-content),
.feature-layout--content-limited:not(.feature-layout--image-behind) #title-feature:is(.pf-w-wide, .pf-w-content),
#portfolio_page #hero.hero-layout--content-limited:not(.hero-layout--image-behind) #title-home:is(.pf-w-wide, .pf-w-content),
#portfolio_page section.home-feature-vedette.feature-layout--content-limited:not(.feature-layout--image-behind) #title-feature:is(.pf-w-wide, .pf-w-content) {
    max-width: var(--layout-width-content);
    margin-inline: auto;
}

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

/* Image derrière : largeur du bloc texte selon content-full|limited (« pleine largeur » plafonnée à --layout-width-wide, comme ailleurs) */
.hero-layout--content-full.hero-layout--image-behind #title-home #home-about,
.feature-layout--content-full.feature-layout--image-behind #title-feature #feature-about,
#portfolio_page #hero.hero-layout--content-full.hero-layout--image-behind #title-home #home-about,
#portfolio_page section.home-feature-vedette.feature-layout--content-full.feature-layout--image-behind #title-feature #feature-about {
    max-width: var(--layout-width-wide);
    width: 100%;
    margin-inline: auto;
    padding-inline: 20px;
    box-sizing: border-box;
}

.hero-layout--content-limited.hero-layout--image-behind #title-home #home-about,
.feature-layout--content-limited.feature-layout--image-behind #title-feature #feature-about,
#portfolio_page #hero.hero-layout--content-limited.hero-layout--image-behind #title-home #home-about,
#portfolio_page section.home-feature-vedette.feature-layout--content-limited.feature-layout--image-behind #title-feature #feature-about {
    max-width: var(--layout-width-content);
    width: 100%;
    margin-inline: auto;
    padding-inline: 20px;
    box-sizing: border-box;
}

.hero-layout--content-full.hero-layout--image-behind #title-home #home-about:is(.pf-w-wide, .pf-w-content),
.feature-layout--content-full.feature-layout--image-behind #title-feature #feature-about:is(.pf-w-wide, .pf-w-content) {
    max-width: var(--layout-width-wide);
    margin-inline: auto;
}

.hero-layout--content-limited.hero-layout--image-behind #title-home #home-about:is(.pf-w-wide, .pf-w-content),
.feature-layout--content-limited.feature-layout--image-behind #title-feature #feature-about:is(.pf-w-wide, .pf-w-content) {
    max-width: var(--layout-width-content);
    margin-inline: auto;
}

#portfolio_page #hero.hero-layout #title-home,
#portfolio_page section.home-feature-vedette.feature-layout #title-feature {
    display: grid;
    column-gap: var(--hero-content-gap, 48px);
    row-gap: var(--hero-content-gap, 48px);
}

#portfolio_page section.home-feature-vedette.feature-layout #title-feature {
    column-gap: var(--feature-content-gap, var(--hero-content-gap, 48px));
    row-gap: var(--feature-content-gap, var(--hero-content-gap, 48px));
}

/* Image derrière : l'image va d'un bord à l'autre. La section porte .pf-pad-x-md
   (couche utilitaires, après celle-ci) : on annule sa variable plutôt que la
   propriété, sinon les 20px reviennent de chaque côté. Aucun descendant
   n'utilise cette variable (le texte porte son propre padding-inline). */
.hero-layout--image-behind,
.feature-layout--image-behind {
    --layout-space-x-md: 0px;
    padding-inline: 0;
}

/* Image derrière : conteneur titre pleine largeur (annule le plafond .pf-w-wide) */
/* Pas de padding-inline ici : #home-about / #feature-about porte déjà le padding-inline (20px) du bloc texte — sinon le texte se retrouve avec 40px de marge latérale au lieu de 20px */
.hero-layout--image-behind #title-home,
.hero-layout--image-behind #title-home.pf-w-content,
.hero-layout--image-behind #title-home.pf-w-wide,
#portfolio_page #hero.hero-layout--image-behind #title-home,
.feature-layout--image-behind #title-feature,
.feature-layout--image-behind #title-feature.pf-w-content,
.feature-layout--image-behind #title-feature.pf-w-wide,
#portfolio_page section.home-feature-vedette.feature-layout--image-behind #title-feature {
    max-width: none;
    width: 100%;
    margin-inline: 0;
    grid-template-columns: minmax(0, 1fr);
    column-gap: 0;
    row-gap: 0;
    box-sizing: border-box;
}

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

#portfolio_page #hero.hero-layout,
#portfolio_page section.home-feature-vedette.feature-layout {
    width: 100%;
    max-width: none;
    margin-inline: 0;
    box-sizing: border-box;
}

.hero-layout--image-behind #title-home,
.feature-layout--image-behind #title-feature {
    background-size: cover;
    background-position: center;
    border-radius: 0;
    box-sizing: border-box;
    overflow: visible;
}

#portfolio_page #hero.hero-layout--image-behind,
#portfolio_page section.home-feature-vedette.feature-layout--image-behind {
    border-radius: 0;
}

.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;
    border-radius: 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 : l'alignement vertical vaut pour le couple texte / image —
 * le plus court des deux se cale en haut, au centre ou en bas de l'autre.
 */
.hero-layout--image-left :is(#home-about, #home-present),
.hero-layout--image-right :is(#home-about, #home-present),
.feature-layout--image-left :is(#feature-about, #feature-present),
.feature-layout--image-right :is(#feature-about, #feature-present) {
    align-self: center;
}

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

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

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

.hero-layout--image-above #title-home,
.hero-layout--image-below #title-home,
.feature-layout--image-above #title-feature,
.feature-layout--image-below #title-feature {
    grid-template-columns: 1fr;
}

/* Au-dessus / en dessous : l’image reste dans #home-present / #feature-present, jamais en fond de section */
.hero-layout--image-above,
.hero-layout--image-below,
.feature-layout--image-above,
.feature-layout--image-below,
.hero-layout--image-above #title-home,
.hero-layout--image-below #title-home,
.feature-layout--image-above #title-feature,
.feature-layout--image-below #title-feature {
    background-image: none;
}

.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;
}

.hero-layout--image-none #title-home,
.feature-layout--image-none #title-feature {
    column-gap: 0;
    row-gap: 0;
}

.hero-layout #home-present {
    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));
    border-radius: var(--portfolios-thumbnail-radius, 0);
    overflow: hidden;
    display: block;
    position: relative;
}

.feature-layout #feature-present {
    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));
    border-radius: var(--portfolios-thumbnail-radius, 0);
    overflow: hidden;
    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: hidden;
}

/* Image derrière : pas de bordure/ombre sur la couche image (contrairement aux autres dispositions) */
.hero-layout--image-behind #title-home #home-bg,
.hero-layout--image-behind #title-home #home-present #home-bg,
.hero-layout--image-behind #title-home #home-present.customizer-hero-placeholder,
.feature-layout--image-behind #title-feature #feature-bg,
.feature-layout--image-behind #title-feature #feature-present #feature-bg,
.feature-layout--image-behind #title-feature #feature-present.customizer-hero-placeholder {
    border: none;
    box-shadow: none;
}

.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;
}

/*
 * Ratio libre : --hero/feature-image-aspect-ratio (« L / H ») et
 * --hero/feature-image-ratio (nombre) viennent du réglage (layout_engine.php).
 * Les classes --aspect-square|vertical|horizontal ne donnent que l'orientation.
 *
 * Portrait : ne pas dériver la hauteur de la largeur du bloc
 * (pleine grille ou colonne 50 % → image démesurée). On plafonne
 * la hauteur, la largeur suit le ratio.
 */
.hero-layout--aspect-vertical:not(.hero-layout--image-behind) #home-present,
.feature-layout--aspect-vertical:not(.feature-layout--image-behind) #feature-present {
    --hero-portrait-max-height: min(72vh, 40rem);
    max-width: 100%;
    height: auto;
    max-height: var(--hero-portrait-max-height);
}

.hero-layout--aspect-vertical:not(.hero-layout--image-behind) #home-present {
    width: min(100%, calc(var(--hero-portrait-max-height) * var(--hero-image-ratio, 0.5625)));
}

.feature-layout--aspect-vertical:not(.feature-layout--image-behind) #feature-present {
    width: min(100%, calc(var(--hero-portrait-max-height) * var(--feature-image-ratio, 0.5625)));
}

.hero-layout--aspect-vertical.hero-layout--image-left #home-present,
.feature-layout--aspect-vertical.feature-layout--image-left #feature-present {
    justify-self: start;
}

.hero-layout--aspect-vertical.hero-layout--image-right #home-present,
.feature-layout--aspect-vertical.feature-layout--image-right #feature-present {
    justify-self: end;
}

/*
 * Image au-dessus / en dessous : hauteur plafonnée quel que soit le format
 * (sinon un carré pleine largeur devient démesuré), et l'image suit
 * l'alignement du texte (gauche / centre / droite).
 */
.hero-layout:is(.hero-layout--image-above, .hero-layout--image-below) #home-present,
.feature-layout:is(.feature-layout--image-above, .feature-layout--image-below) #feature-present {
    --hero-portrait-max-height: min(72vh, 40rem);
    height: auto;
    max-width: 100%;
    max-height: var(--hero-portrait-max-height);
    justify-self: start;
}

.hero-layout:is(.hero-layout--image-above, .hero-layout--image-below) #home-present {
    width: min(100%, calc(var(--hero-portrait-max-height) * var(--hero-image-ratio, 1.7778)));
}

.feature-layout:is(.feature-layout--image-above, .feature-layout--image-below) #feature-present {
    width: min(100%, calc(var(--hero-portrait-max-height) * var(--feature-image-ratio, 1.7778)));
}

.hero-layout:is(.hero-layout--image-above, .hero-layout--image-below) #title-home.title-align-center #home-present,
.feature-layout:is(.feature-layout--image-above, .feature-layout--image-below) #title-feature.title-align-center #feature-present {
    justify-self: center;
}

.hero-layout:is(.hero-layout--image-above, .hero-layout--image-below) #title-home.title-align-right #home-present,
.feature-layout:is(.feature-layout--image-above, .feature-layout--image-below) #title-feature.title-align-right #feature-present {
    justify-self: end;
}

/* Alignement de l'image choisi explicitement (prime sur l'alignement du texte) */
.hero-layout:is(.hero-layout--image-above, .hero-layout--image-below).hero-layout--image-valign-left #title-home #home-present,
.feature-layout:is(.feature-layout--image-above, .feature-layout--image-below).feature-layout--image-valign-left #title-feature #feature-present {
    justify-self: start;
}

.hero-layout:is(.hero-layout--image-above, .hero-layout--image-below).hero-layout--image-valign-center #title-home #home-present,
.feature-layout:is(.feature-layout--image-above, .feature-layout--image-below).feature-layout--image-valign-center #title-feature #feature-present {
    justify-self: center;
}

.hero-layout:is(.hero-layout--image-above, .hero-layout--image-below).hero-layout--image-valign-right #title-home #home-present,
.feature-layout:is(.feature-layout--image-above, .feature-layout--image-below).feature-layout--image-valign-right #title-feature #feature-present {
    justify-self: end;
}

/* 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 .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) {
    /*
     * Gauche / droite : trop étroit en colonnes.
     * Gauche → même pile que « au-dessus » ; droite → même pile que « en dessous ».
     * L’espace texte/image passe de column-gap à row-gap (même variable).
     */
    #portfolio_page #hero.hero-layout.hero-layout--image-left #title-home,
    #portfolio_page #hero.hero-layout.hero-layout--image-right #title-home,
    .hero-layout--image-left #title-home,
    .hero-layout--image-right #title-home,
    #portfolio_page section.home-feature-vedette.feature-layout.feature-layout--image-left #title-feature,
    #portfolio_page section.home-feature-vedette.feature-layout.feature-layout--image-right #title-feature,
    .feature-layout--image-left #title-feature,
    .feature-layout--image-right #title-feature {
        --hero-side-image-max: 100%;
        grid-template-columns: 1fr;
        column-gap: 0;
    }

    #portfolio_page #hero.hero-layout.hero-layout--image-left #title-home,
    #portfolio_page #hero.hero-layout.hero-layout--image-right #title-home,
    .hero-layout--image-left #title-home,
    .hero-layout--image-right #title-home {
        row-gap: var(--hero-content-gap, 48px);
    }

    #portfolio_page section.home-feature-vedette.feature-layout.feature-layout--image-left #title-feature,
    #portfolio_page section.home-feature-vedette.feature-layout.feature-layout--image-right #title-feature,
    .feature-layout--image-left #title-feature,
    .feature-layout--image-right #title-feature {
        row-gap: var(--feature-content-gap, var(--hero-content-gap, 48px));
    }

    .hero-layout--image-left #home-present,
    .feature-layout--image-left #feature-present {
        order: 1;
        align-self: stretch;
        justify-self: center;
        width: 100%;
        max-width: 100%;
        height: auto;
    }

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

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

    .hero-layout--image-right #home-present,
    .feature-layout--image-right #feature-present {
        order: 2;
        align-self: stretch;
        justify-self: center;
        width: 100%;
        max-width: 100%;
        height: auto;
    }

    .hero-layout--image-left.hero-layout--image-valign-top #home-present,
    .hero-layout--image-left.hero-layout--image-valign-center #home-present,
    .hero-layout--image-left.hero-layout--image-valign-bottom #home-present,
    .hero-layout--image-right.hero-layout--image-valign-top #home-present,
    .hero-layout--image-right.hero-layout--image-valign-center #home-present,
    .hero-layout--image-right.hero-layout--image-valign-bottom #home-present,
    .feature-layout--image-left.feature-layout--image-valign-top #feature-present,
    .feature-layout--image-left.feature-layout--image-valign-center #feature-present,
    .feature-layout--image-left.feature-layout--image-valign-bottom #feature-present,
    .feature-layout--image-right.feature-layout--image-valign-top #feature-present,
    .feature-layout--image-right.feature-layout--image-valign-center #feature-present,
    .feature-layout--image-right.feature-layout--image-valign-bottom #feature-present,
    :is(.hero-layout--image-left, .hero-layout--image-right):is(.hero-layout--image-valign-top, .hero-layout--image-valign-bottom) #home-about,
    :is(.feature-layout--image-left, .feature-layout--image-right):is(.feature-layout--image-valign-top, .feature-layout--image-valign-bottom) #feature-about {
        align-self: stretch;
    }

    .hero-layout--aspect-vertical.hero-layout--image-left #home-present,
    .hero-layout--aspect-vertical.hero-layout--image-right #home-present,
    .feature-layout--aspect-vertical.feature-layout--image-left #feature-present,
    .feature-layout--aspect-vertical.feature-layout--image-right #feature-present {
        justify-self: center;
    }
}
}

/* assets/css/public/modules/features/section-layout.css */
/* @layer-wrap:site.elements */
@layer site.elements {
/* Version: 20-09-2026-16-46 */
/* Version: 18-07-2026-20-46 — vedettes : réutilise le moteur hero */
/* Pas d'@import ici : ce fichier est toujours chargé en même temps que design/home/section-layout.css
   (home.php, preview_assets.php), qui contient déjà les règles .feature-layout / #title-feature.
   Un @import provoquait un double chargement/parsing de ces règles (visible en double dans le réseau). */
}

/* assets/css/public/design/home/home-feature-title-align.css */
/* @layer-wrap:site.elements */
@layer site.elements {
/* Version: 20-09-2026-16-46 */
/*
 * Accueil (#hero) & vedettes (.home-feature-vedette) : le PHP pose title-align-* sur #title-home / #home-about
 * (et équivalents vedettes), alors que les gabarits head-*.css / feature design-*.css ciblent encore .align-*.
 * On réaligne titres, paragraphes et boutons (.folio_button) de la même façon.
 */

/* ----- Texte : même logique que les anciennes règles .align-* / #home-about ----- */

#portfolio_page #hero #title-home.title-align-left #home-about h1,
#portfolio_page #hero #title-home.title-align-left #home-about h2,
#portfolio_page #hero #title-home.title-align-left #home-about p,
#portfolio_page #hero #home-about.title-align-left h1,
#portfolio_page #hero #home-about.title-align-left h2,
#portfolio_page #hero #home-about.title-align-left p {
    text-align: left;
}

#portfolio_page #hero #title-home.title-align-center #home-about h1,
#portfolio_page #hero #title-home.title-align-center #home-about h2,
#portfolio_page #hero #title-home.title-align-center #home-about p,
#portfolio_page #hero #home-about.title-align-center h1,
#portfolio_page #hero #home-about.title-align-center h2,
#portfolio_page #hero #home-about.title-align-center p {
    text-align: center;
}

#portfolio_page #hero #title-home.title-align-right #home-about h1,
#portfolio_page #hero #title-home.title-align-right #home-about h2,
#portfolio_page #hero #title-home.title-align-right #home-about p,
#portfolio_page #hero #home-about.title-align-right h1,
#portfolio_page #hero #home-about.title-align-right h2,
#portfolio_page #hero #home-about.title-align-right p {
    text-align: right;
}

#portfolio_page section.home-feature-vedette #title-feature.title-align-left #feature-about h1,
#portfolio_page section.home-feature-vedette #title-feature.title-align-left #feature-about h2,
#portfolio_page section.home-feature-vedette #title-feature.title-align-left #feature-about p,
#portfolio_page section.home-feature-vedette #feature-about.title-align-left h1,
#portfolio_page section.home-feature-vedette #feature-about.title-align-left h2,
#portfolio_page section.home-feature-vedette #feature-about.title-align-left p {
    text-align: left;
}

#portfolio_page section.home-feature-vedette #title-feature.title-align-center #feature-about h1,
#portfolio_page section.home-feature-vedette #title-feature.title-align-center #feature-about h2,
#portfolio_page section.home-feature-vedette #title-feature.title-align-center #feature-about p,
#portfolio_page section.home-feature-vedette #feature-about.title-align-center h1,
#portfolio_page section.home-feature-vedette #feature-about.title-align-center h2,
#portfolio_page section.home-feature-vedette #feature-about.title-align-center p {
    text-align: center;
}

#portfolio_page section.home-feature-vedette #title-feature.title-align-right #feature-about h1,
#portfolio_page section.home-feature-vedette #title-feature.title-align-right #feature-about h2,
#portfolio_page section.home-feature-vedette #title-feature.title-align-right #feature-about p,
#portfolio_page section.home-feature-vedette #feature-about.title-align-right h1,
#portfolio_page section.home-feature-vedette #feature-about.title-align-right h2,
#portfolio_page section.home-feature-vedette #feature-about.title-align-right p {
    text-align: right;
}

/* ----- Gabarit 1 & 2 (flex) : alignement transversal comme les anciennes .align-* sur #title-home / #title-feature ----- */

#portfolio_page #hero.home-design-one #title-home.title-align-left {
    align-items: flex-start;
}

#portfolio_page #hero.home-design-one #title-home.title-align-center {
    align-items: center;
}

#portfolio_page #hero.home-design-one #title-home.title-align-right {
    align-items: flex-end;
}

/* Gabarit 1 : colonne texte (#home-about / #feature-about), comme .align-* #home-about */
#portfolio_page #hero.home-design-one #title-home.title-align-left #home-about,
#portfolio_page #hero.home-design-one #home-about.title-align-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

#portfolio_page #hero.home-design-one #title-home.title-align-center #home-about,
#portfolio_page #hero.home-design-one #home-about.title-align-center {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#portfolio_page #hero.home-design-one #title-home.title-align-right #home-about,
#portfolio_page #hero.home-design-one #home-about.title-align-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

#portfolio_page section.home-feature-vedette.feature-design-one #title-feature.title-align-left #feature-about,
#portfolio_page section.home-feature-vedette.feature-design-one #feature-about.title-align-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

#portfolio_page section.home-feature-vedette.feature-design-one #title-feature.title-align-center #feature-about,
#portfolio_page section.home-feature-vedette.feature-design-one #feature-about.title-align-center {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#portfolio_page section.home-feature-vedette.feature-design-one #title-feature.title-align-right #feature-about,
#portfolio_page section.home-feature-vedette.feature-design-one #feature-about.title-align-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

#portfolio_page #hero.home-design-two #title-home.title-align-left,
#portfolio_page section.home-feature-vedette.feature-design-two #title-feature.title-align-left {
    align-items: flex-start;
    text-align: left;
}

#portfolio_page #hero.home-design-two #title-home.title-align-center,
#portfolio_page section.home-feature-vedette.feature-design-two #title-feature.title-align-center {
    align-items: center;
    text-align: center;
}

#portfolio_page #hero.home-design-two #title-home.title-align-right,
#portfolio_page section.home-feature-vedette.feature-design-two #title-feature.title-align-right {
    align-items: flex-end;
    text-align: right;
}

#portfolio_page section.home-feature-vedette.feature-design-one #title-feature.title-align-left {
    align-items: flex-start;
}

#portfolio_page section.home-feature-vedette.feature-design-one #title-feature.title-align-center {
    align-items: center;
}

#portfolio_page section.home-feature-vedette.feature-design-one #title-feature.title-align-right {
    align-items: flex-end;
}

/* Gabarit 3 : section en colonne ; #title-home porte title-align-* */
#portfolio_page #hero.home-design-three #title-home.title-align-left {
    align-items: flex-start;
}

#portfolio_page #hero.home-design-three #title-home.title-align-center {
    align-items: center;
}

#portfolio_page #hero.home-design-three #title-home.title-align-right {
    align-items: flex-end;
}

#portfolio_page #hero.home-design-three #title-home {
    display: flex;
    flex-direction: column;
}

#portfolio_page section.home-feature-vedette.feature-design-three #title-feature.title-align-left {
    align-items: flex-start;
}

#portfolio_page section.home-feature-vedette.feature-design-three #title-feature.title-align-center {
    align-items: center;
}

#portfolio_page section.home-feature-vedette.feature-design-three #title-feature.title-align-right {
    align-items: flex-end;
}

#portfolio_page section.home-feature-vedette.feature-design-three #title-feature {
    display: flex;
    flex-direction: column;
}

/* Gabarit 4 : titres dans #*-present ; CTA souvent dans #*-about sous #title-* */
#portfolio_page #hero.home-design-four #title-home.title-align-left {
    align-items: flex-start;
}

#portfolio_page #hero.home-design-four #title-home.title-align-center {
    align-items: center;
}

#portfolio_page #hero.home-design-four #title-home.title-align-right {
    align-items: flex-end;
}

#portfolio_page section.home-feature-vedette.feature-design-four #title-feature.title-align-left {
    align-items: flex-start;
}

#portfolio_page section.home-feature-vedette.feature-design-four #title-feature.title-align-center {
    align-items: center;
}

#portfolio_page section.home-feature-vedette.feature-design-four #title-feature.title-align-right {
    align-items: flex-end;
}

#portfolio_page #hero.home-design-four #title-home.title-align-left #home-about,
#portfolio_page #hero.home-design-four #title-home.title-align-center #home-about,
#portfolio_page #hero.home-design-four #title-home.title-align-right #home-about {
    display: flex;
    flex-direction: column;
}

#portfolio_page #hero.home-design-four #title-home.title-align-left #home-about {
    align-items: flex-start;
}

#portfolio_page #hero.home-design-four #title-home.title-align-center #home-about {
    align-items: center;
}

#portfolio_page #hero.home-design-four #title-home.title-align-right #home-about {
    align-items: flex-end;
}

#portfolio_page section.home-feature-vedette.feature-design-four #title-feature.title-align-left #feature-about,
#portfolio_page section.home-feature-vedette.feature-design-four #title-feature.title-align-center #feature-about,
#portfolio_page section.home-feature-vedette.feature-design-four #title-feature.title-align-right #feature-about {
    display: flex;
    flex-direction: column;
}

#portfolio_page section.home-feature-vedette.feature-design-four #title-feature.title-align-left #feature-about {
    align-items: flex-start;
}

#portfolio_page section.home-feature-vedette.feature-design-four #title-feature.title-align-center #feature-about {
    align-items: center;
}

#portfolio_page section.home-feature-vedette.feature-design-four #title-feature.title-align-right #feature-about {
    align-items: flex-end;
}

/* ----- Colonnes #home-about / #feature-about (flex + media fonts.css) : pas d’étirement des CTA ----- */

#portfolio_page #hero #home-about.title-align-left,
#portfolio_page #hero #title-home.title-align-left #home-about:not([class*="title-align-"]) {
    align-items: flex-start;
}

#portfolio_page #hero #home-about.title-align-center,
#portfolio_page #hero #title-home.title-align-center #home-about:not([class*="title-align-"]) {
    align-items: center;
}

#portfolio_page #hero #home-about.title-align-right,
#portfolio_page #hero #title-home.title-align-right #home-about:not([class*="title-align-"]) {
    align-items: flex-end;
}

#portfolio_page section.home-feature-vedette #feature-about.title-align-left,
#portfolio_page section.home-feature-vedette #title-feature.title-align-left #feature-about:not([class*="title-align-"]) {
    align-items: flex-start;
}

#portfolio_page section.home-feature-vedette #feature-about.title-align-center,
#portfolio_page section.home-feature-vedette #title-feature.title-align-center #feature-about:not([class*="title-align-"]) {
    align-items: center;
}

#portfolio_page section.home-feature-vedette #feature-about.title-align-right,
#portfolio_page section.home-feature-vedette #title-feature.title-align-right #feature-about:not([class*="title-align-"]) {
    align-items: flex-end;
}

/* Boutons : même ligne de base que le bloc de texte (flex : align-self ; flux : héritage text-align sur inline-block) */
#portfolio_page #hero #title-home.title-align-left #home-about .folio_button,
#portfolio_page #hero #home-about.title-align-left .folio_button,
#portfolio_page section.home-feature-vedette #title-feature.title-align-left #feature-about .folio_button,
#portfolio_page section.home-feature-vedette #feature-about.title-align-left .folio_button {
    align-self: flex-start;
}

#portfolio_page #hero #title-home.title-align-center #home-about .folio_button,
#portfolio_page #hero #home-about.title-align-center .folio_button,
#portfolio_page section.home-feature-vedette #title-feature.title-align-center #feature-about .folio_button,
#portfolio_page section.home-feature-vedette #feature-about.title-align-center .folio_button {
    align-self: center;
}

#portfolio_page #hero #title-home.title-align-right #home-about .folio_button,
#portfolio_page #hero #home-about.title-align-right .folio_button,
#portfolio_page section.home-feature-vedette #title-feature.title-align-right #feature-about .folio_button,
#portfolio_page section.home-feature-vedette #feature-about.title-align-right .folio_button {
    align-self: flex-end;
}
}