/* assets/css/public/structure/layout/content.css */
@layer site.socle.general {
/* Version: 20-09-2026-16-46 */
/* Version: 04-09-2026-content-align */
/*
 * Contenu riche Arktefakt — public + éditeur Writer.
 * Contrat HTML : blocs Writer (serialize.js) + sanitize writer.php.
 * Variables : --pf-font-size-base, --pf-heading-* (thème portfolio).
 * Les fallbacks gardent un rendu lisible hors thème portfolio (hub Writer, register CGV).
 */

/* --------------------------------------------------------------------------
   Conteneur
   -------------------------------------------------------------------------- */

.pf-c-prose {
    font-size: var(--pf-font-size-base, 14px);
    line-height: var(--pf-text-line-height, calc(var(--pf-font-size-base, 14px) + 10px));
    letter-spacing: 0.4px;
    font-weight: inherit;
    color: inherit;
    --pf-content-link-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M14 3h7v7h-2V6.41l-9.29 9.3-1.42-1.42 9.3-9.29H14V3z'/%3E%3C/svg%3E");
    --pf-content-link-padding-y: 0.15em;
    --pf-content-link-padding-x: 0.42em;
}

.pf-c-prose :is(.pf-c-article__subtitle, .pf-c-gate__label, .pf-c-error__code, .pf-c-error__subtitle),
.pf-c-prose :is(.pf-c-article__subtitle, .pf-c-gate__label, .pf-c-error__code, .pf-c-error__subtitle) p {
    margin: 20px 0;
    font-weight: bold;
}

/* --------------------------------------------------------------------------
   Paragraphes et variantes
   -------------------------------------------------------------------------- */

.pf-c-prose p {
    margin-bottom: 25px;
}

.pf-c-prose p.description,
.pf-c-prose .writer-editable.description {
    font-size: calc(var(--pf-font-size-base, 14px) * 1.05);
    line-height: 1.55;
    color: inherit;
    opacity: 0.92;
}

.pf-c-prose p.commentaire,
.pf-c-prose .writer-editable.commentaire {
    font-size: calc(var(--pf-font-size-base, 14px) * 0.95);
    line-height: 1.5;
    font-style: italic;
    color: inherit;
    opacity: 0.85;
    padding-left: 0.5rem;
    border-left: 2px solid color-mix(in srgb, currentColor 25%, transparent);
}

.pf-c-prose u {
    text-decoration: underline;
}

/* Gras et italique (reset + fonts.css annulent les styles navigateur par défaut) */
.pf-c-prose :is(strong, b),
.pf-c-prose .writer-editable :is(strong, b) {
    font-weight: var(--pf-font-weight-bold, 700);
}

.pf-c-prose :is(em, i),
.pf-c-prose .writer-editable :is(em, i) {
    font-style: italic;
}

/* Tableau (bloc Writer) : défile horizontalement s’il est plus large que le contenu.
   contain: inline-size : sa largeur ne remonte pas aux parents ; sans cela, dans une
   colonne de grille / flex sans min-width: 0, le tableau élargit la colonne au lieu
   de défiler et le bord droit est coupé sur mobile. */
.pf-c-prose .writer-table {
    max-width: 100%;
    margin: 1.2em 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    contain: inline-size;
}

.pf-c-prose .writer-table table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95em;
}

.pf-c-prose .writer-table caption {
    caption-side: bottom;
    padding-top: 0.5em;
    font-size: 0.85em;
    text-align: left;
    opacity: 0.75;
}

.pf-c-prose .writer-table :is(th, td) {
    padding: 0.5em 0.75em;
    border-bottom: 1px solid color-mix(in srgb, currentColor 18%, transparent);
    text-align: left;
    vertical-align: top;
}

.pf-c-prose .writer-table th {
    font-weight: var(--pf-font-weight-bold, 700);
    border-bottom-width: 2px;
}

.pf-c-prose .writer-table :is(th, td).writer-align-center {
    text-align: center;
}

.pf-c-prose .writer-table :is(th, td).writer-align-right {
    text-align: right;
}

/* Code en ligne (Markdown `code`, collage) : police à chasse fixe, fond léger. */
.pf-c-prose code,
.pf-c-prose .writer-editable code {
    padding: 0.1em 0.3em;
    border-radius: 3px;
    background: color-mix(in srgb, currentColor 8%, transparent);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.9em;
}

/* --------------------------------------------------------------------------
   Titres dans le corps (hors titres de page)
   -------------------------------------------------------------------------- */

.pf-c-prose h1 {
    font-size: var(--pf-heading-primary-size, 21px);
    line-height: var(--pf-heading-primary-line-height, calc(var(--pf-heading-primary-size, 21px) + 2px));
    font-weight: bold;
    color: var(--pf-heading-primary-color, inherit);
    display: block;
    padding: 0;
    margin: 0 0 0.75rem;
}

.pf-c-prose h1 :is(a, span, p, strong, em, b, i, small) {
    color: inherit;
}

.pf-c-prose :is(h2, h3, h4, h5, h6) {
    font-size: var(--pf-heading-secondary-size, 14px);
    line-height: var(--pf-heading-secondary-line-height, calc(var(--pf-heading-secondary-size, 14px) + 10px));
    font-weight: bold;
    color: var(--pf-heading-secondary-color, inherit);
}

.pf-c-prose h2 {
    margin: 45px 0 0.65rem;
}

.pf-c-prose h3 {
    margin: 25px 0 0.65rem;
}

.pf-c-prose :is(h4, h5, h6) {
    margin: 0 0 0.65rem;
}

.pf-c-prose :is(h2, h3, h4, h5, h6) :is(a, span, p, strong, em, b, i, small) {
    color: inherit;
}

/* --------------------------------------------------------------------------
   Alignement et décalage (Writer)
   -------------------------------------------------------------------------- */

.pf-c-prose p.writer-align-center,
.pf-c-prose blockquote p.writer-align-center {
    text-align: center;
}

.pf-c-prose p.writer-align-right,
.pf-c-prose blockquote p.writer-align-right {
    text-align: right;
}

.pf-c-prose p.writer-align-justify,
.pf-c-prose blockquote p.writer-align-justify {
    text-align: justify;
}

.pf-c-prose p.writer-indent-1,
.pf-c-prose blockquote p.writer-indent-1 { margin-left: 1.25rem; }
.pf-c-prose p.writer-indent-2,
.pf-c-prose blockquote p.writer-indent-2 { margin-left: 2.5rem; }
.pf-c-prose p.writer-indent-3,
.pf-c-prose blockquote p.writer-indent-3 { margin-left: 3.75rem; }
.pf-c-prose p.writer-indent-4,
.pf-c-prose blockquote p.writer-indent-4 { margin-left: 5rem; }
.pf-c-prose p.writer-indent-5,
.pf-c-prose blockquote p.writer-indent-5 { margin-left: 6.25rem; }

/* Éditeur Writer : classes sur .writer-editable (div), pas seulement p */
.pf-c-prose .writer-editable.writer-align-center {
    text-align: center;
}

.pf-c-prose .writer-editable.writer-align-right {
    text-align: right;
}

.pf-c-prose .writer-editable.writer-align-justify {
    text-align: justify;
}

.pf-c-prose .writer-editable.writer-indent-1 { margin-left: 1.25rem; }
.pf-c-prose .writer-editable.writer-indent-2 { margin-left: 2.5rem; }
.pf-c-prose .writer-editable.writer-indent-3 { margin-left: 3.75rem; }
.pf-c-prose .writer-editable.writer-indent-4 { margin-left: 5rem; }
.pf-c-prose .writer-editable.writer-indent-5 { margin-left: 6.25rem; }

/* --------------------------------------------------------------------------
   Mise en page (Writer)
   -------------------------------------------------------------------------- */

.pf-c-prose hr.writer-separator,
.writer-editor.pf-c-prose hr.writer-separator {
    display: block;
    width: 100%;
    height: 0;
    margin: 1.5rem 0;
    padding: 0;
    border: none;
    border-top: 1px solid var(--pf-color-border, color-mix(in srgb, currentColor 22%, transparent));
    border-top-color: color-mix(
        in srgb,
        var(--pf-button-background-color, var(--pf-heading-secondary-color, currentColor)) 55%,
        var(--pf-color-border-custom, var(--pf-color-border, currentColor)) 45%
    );
    background: transparent;
    opacity: 0.9;
}

.pf-c-prose .writer-spacer {
    display: block;
    width: 100%;
    height: 10px;
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
}

.pf-c-prose .writer-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
    width: 100%;
    margin: 1rem 0;
}

.pf-c-prose .writer-column {
    min-width: 0;
}

.pf-c-prose .writer-column > :first-child {
    margin-top: 0;
}

.pf-c-prose .writer-column > :last-child {
    margin-bottom: 0;
}

@media (max-width: 768px) {
    .pf-c-prose .writer-columns {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

/* --------------------------------------------------------------------------
   Citations
   -------------------------------------------------------------------------- */

.pf-c-page .pf-c-prose blockquote,
.pf-c-page .pf-c-prose blockquote :is(p, span, cite, em, strong, b, i, li) {
    color: var(--pf-body-text-color, var(--pf-text-main-color, inherit));
}

.pf-c-prose blockquote {
    position: relative;
    padding: 50px;
    margin-top: 30px;
    margin-bottom: 20px;
}

.pf-c-prose blockquote * {
    margin: 0;
    font-weight: bold;
}

.pf-c-prose blockquote::before {
    position: absolute;
    content: '❝';
    font-size: 60px;
    left: 0;
    top: 0;
}

.pf-c-prose blockquote::after {
    position: absolute;
    content: '❞';
    font-size: 60px;
    right: 0;
    bottom: 0;
}

/* --------------------------------------------------------------------------
   Listes
   -------------------------------------------------------------------------- */

/* Fil d'Ariane (nav.ariane) dans une zone de texte : hors des listes éditoriales, il garde le style du thème
   (:where = sans changer la priorité de ces règles). */
.pf-c-prose ul:where(:not(nav.pf-c-breadcrumb *)),
.pf-c-prose ol:where(:not(nav.pf-c-breadcrumb *)) {
    margin-bottom: 25px;
}

.pf-c-prose ul li:where(:not(nav.pf-c-breadcrumb *)),
.pf-c-prose ol li:where(:not(nav.pf-c-breadcrumb *)) {
    margin-left: 15px;
    padding-left: 15px;
    margin-bottom: 20px;
    line-height: calc(1em + 15px);
}

.pf-c-prose ul li:where(:not(nav.pf-c-breadcrumb *)) {
    list-style-type: disc;
}

.pf-c-prose ol li:where(:not(nav.pf-c-breadcrumb *)) {
    list-style-type: decimal;
}

/* --------------------------------------------------------------------------
   Figures et médias intégrés
   -------------------------------------------------------------------------- */

.pf-c-prose .writer-figure {
    display: flex;
    flex-direction: column;
    gap: var(--layout-space-y-sm, 15px);
    margin: var(--layout-space-y-md, 25px) 0 var(--layout-space-y-lg, 45px);
}

.pf-c-prose .writer-figure img {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: var(--pf-thumbnail-radius, 0);
}

.pf-c-prose .writer-figure > :is(.youtube, .vimeo, .dailymotion, .tiktok, .instagram, .facebook) {
    margin-bottom: 0;
}

/* Légende : 1re ligne / gras = titre, reste = description. */
.pf-c-prose .writer-figure figcaption {
    max-width: 65ch;
    padding-left: var(--layout-space-x-sm, 10px);
    border-left: 1px solid color-mix(in srgb, currentColor 25%, transparent);
    font-size: calc(var(--pf-font-size-base, 14px) * 0.9);
    line-height: 1.55;
    opacity: 0.78;
}

.pf-c-prose .writer-figure figcaption :is(strong, b) {
    display: block;
    margin-bottom: calc(var(--layout-space-y-sm, 15px) / 5);
    font-size: 1.08em;
    font-weight: 500;
    opacity: 1;
}

.pf-c-prose .writer-figure figcaption:empty {
    display: none;
}

.pf-c-prose .youtube,
.pf-c-prose .vimeo,
.pf-c-prose .dailymotion,
.pf-c-prose .tiktok,
.pf-c-prose .instagram,
.pf-c-prose .facebook {
    max-width: 100%;
    box-sizing: border-box;
    margin-bottom: 1.5rem;
}

.pf-c-prose .youtube:not(.video-portrait),
.pf-c-prose .vimeo,
.pf-c-prose .dailymotion,
.pf-c-prose .facebook:not(.video-portrait) {
    position: relative;
    height: 0;
    overflow: hidden;
    padding-top: 0;
    padding-bottom: 56.25%;
}

.pf-c-prose .vimeo {
    padding-bottom: 56.25%;
}

.pf-c-prose .youtube:not(.video-portrait) iframe,
.pf-c-prose .vimeo iframe,
.pf-c-prose .dailymotion iframe,
.pf-c-prose .facebook:not(.video-portrait) iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.pf-c-prose :is(.tiktok, .tiktok.video-portrait, .instagram, .instagram.video-portrait, .youtube.video-portrait, .facebook.video-portrait) {
    position: relative;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    aspect-ratio: 9 / 16;
    height: auto;
    padding: 0;
    overflow: hidden;
}

.pf-c-prose :is(.tiktok, .instagram, .youtube.video-portrait, .facebook.video-portrait) iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

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

    .pf-c-prose :is(.tiktok, .instagram, .youtube.video-portrait, .facebook.video-portrait) {
        max-height: 85svh;
    }

}

.pf-c-prose .youtube iframe,
.pf-c-prose .dailymotion iframe,
.pf-c-prose iframe,
.pf-c-prose video,
.pf-c-prose embed,
.pf-c-prose object {
    max-width: 100%;
    box-sizing: border-box;
}

.pf-c-prose video {
    height: auto;
}

.pf-c-page .pf-c-prose :is(.youtube, .vimeo, .dailymotion, .tiktok, .instagram, .facebook):hover,
.pf-c-page .pf-c-prose :is(.youtube, .vimeo, .dailymotion, .tiktok, .instagram, .facebook):active,
.pf-c-page .pf-c-article__media:is(.youtube, .vimeo, .dailymotion, .tiktok, .instagram, .facebook):hover,
.pf-c-page .pf-c-article__media :is(.youtube, .vimeo, .dailymotion, .tiktok, .instagram, .facebook):hover,
.pf-c-page .pf-c-article__media:is(.youtube, .vimeo, .dailymotion, .tiktok, .instagram, .facebook):active,
.pf-c-page .pf-c-article__media :is(.youtube, .vimeo, .dailymotion, .tiktok, .instagram, .facebook):active {
    filter: none;
    transform: none;
    transition: none;
}

/* --------------------------------------------------------------------------
   Liens dans le corps : icône (soulignement et couleur : reading.css, couche lecture)
   -------------------------------------------------------------------------- */

.pf-c-prose a:not(:is(h1 a, h2 a, h3 a, h4 a, h5 a, h6 a)):where(:not(nav.pf-c-breadcrumb *))::after,
.pf-c-prose p a:not(:is(h1 a, h2 a, h3 a, h4 a, h5 a, h6 a))::after,
.pf-c-article__lead:where(.pf-c-prose) a::after,
.pf-c-article__lead:where(.pf-c-prose) p a::after,
.writer-page .writer-editor.pf-c-prose a:not(:is(h1 a, h2 a, h3 a, h4 a, h5 a, h6 a))::after {
    content: "";
    display: inline-block;
    width: 0.8em;
    height: 0.8em;
    margin-left: 0.12em;
    vertical-align: -0.05em;
    background-color: currentColor;
    -webkit-mask: var(--pf-content-link-icon) no-repeat center / contain;
    mask: var(--pf-content-link-icon) no-repeat center / contain;
    text-decoration: none;
    pointer-events: none;
}

/* Hub Writer : priorité sur fonts.css (p, a { font-size: var(--pf-font-size-base) !important }) */
.writer-page form .writer-editor.pf-c-prose {
    font-size: 14px;
    line-height: calc(1em + 14px);
    letter-spacing: normal;
}

.writer-page .writer-editor.pf-c-prose {
    font-size: var(--pf-font-size-base, 14px);
    line-height: calc(1em + 14px);
}

.writer-page .writer-editor.pf-c-prose :is(p, span, li, blockquote, h1, h2, h3, h4, h5, h6, .writer-list-item-text, .writer-editable) {
    font-size: inherit;
    line-height: inherit;
}

.writer-page .writer-editor.pf-c-prose :is(strong, b) {
    font-weight: var(--pf-font-weight-bold, 700) !important;
}

.writer-page .writer-editor.pf-c-prose :is(em, i) {
    font-style: italic !important;
}

/* Modes d'écriture (paragraphe, description, commentaire) : même taille dans l'éditeur */
.writer-page .writer-editor.pf-c-prose :is(
    p.description,
    .writer-editable.description,
    p.commentaire,
    .writer-editable.commentaire
) {
    font-size: inherit;
    line-height: inherit;
}

.writer-page .writer-editor.pf-c-prose h1 {
    font-size: var(--pf-heading-primary-size, 21px) !important;
    line-height: var(--pf-heading-primary-line-height, calc(var(--pf-heading-primary-size, 21px) + 2px)) !important;
}

.writer-page .writer-editor.pf-c-prose :is(h2, h3, h4, h5, h6) {
    font-size: var(--pf-heading-secondary-size, 14px) !important;
    line-height: var(--pf-heading-secondary-line-height, calc(var(--pf-heading-secondary-size, 14px) + 10px)) !important;
}

.writer-page .writer-editor.pf-c-prose a:not(:is(h1 a, h2 a, h3 a, h4 a, h5 a, h6 a)),
.writer-page .writer-editor.pf-c-prose p a:not(:is(h1 a, h2 a, h3 a, h4 a, h5 a, h6 a)) {
    color: inherit !important;
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    font: inherit !important;
    font-size: 1.06em !important;
    text-decoration-line: underline !important;
    text-decoration-thickness: 1px !important;
    text-decoration-color: var(--pf-button-background-color, currentColor) !important;
    text-underline-offset: 0.2em;
    display: inline !important;
    cursor: pointer !important;
    transition: color 0.3s ease, text-decoration-color 0.3s ease, text-decoration-thickness 0.3s ease;
}

.writer-page .writer-editor.pf-c-prose a:not(:is(h1 a, h2 a, h3 a, h4 a, h5 a, h6 a)):is(:hover, :active),
.writer-page .writer-editor.pf-c-prose p a:not(:is(h1 a, h2 a, h3 a, h4 a, h5 a, h6 a)):is(:hover, :active) {
    color: var(--pf-button-background-color, currentColor) !important;
    background: none !important;
    box-shadow: none !important;
}

.writer-page .writer-editor.pf-c-prose img,
.writer-page .writer-editor.pf-c-prose .writer-figure img {
    max-width: 100%;
    height: auto;
    box-sizing: border-box;
}

/* Placeholder éditeur (zones contenteditable vides) */
.writer-editor.pf-c-prose .writer-editable:empty::before {
    content: attr(data-placeholder);
    color: var(--writer-ui-muted, rgba(128, 128, 128, 0.75));
    pointer-events: none;
}

/* --------------------------------------------------------------------------
   Images — largeur conteneur par contexte de page
   -------------------------------------------------------------------------- */

.pf-c-page .pf-c-prose img,
.pf-c-page .pf-c-article__lead img:where(.pf-c-article__cover),
.pf-c-page .pf-c-article__body:where(.pf-c-prose) img,
.pf-c-page .pf-c-article__main img:where(.pf-c-article__cover) {
    max-width: 100%;
    height: auto;
    box-sizing: border-box;
    filter: none;
    transform: none;
    transition: none;
}

.pf-c-page .pf-c-prose img:hover,
.pf-c-page .pf-c-article__lead img:where(.pf-c-article__cover):hover,
.pf-c-page .pf-c-article__body:where(.pf-c-prose) img:hover,
.pf-c-page .pf-c-article__main img:where(.pf-c-article__cover):hover,
.pf-c-page .pf-c-prose img:active,
.pf-c-page .pf-c-article__lead img:where(.pf-c-article__cover):active,
.pf-c-page .pf-c-article__body:where(.pf-c-prose) img:active,
.pf-c-page .pf-c-article__main img:where(.pf-c-article__cover):active {
    filter: none;
    transform: none;
    transition: none;
}

/*
 * Fiches de contenu — bloc « A propos » (#about-content), rendu par
 * includes/structure/about_card.php : titre → .about-card → .about-card-socials.
 * Le conteneur .about-content porte about-align-left|center|right et pilote toute la pile :
 *  - gauche / droite : portrait à côté du texte (miroir à droite) ;
 *  - centre : portrait au-dessus du texte, tout centré.
 * La carte est plafonnée à la largeur de lecture pour ne pas s'étaler en pleine largeur.
 */
.pf-c-page .pf-c-author--card .pf-c-author__row {
    display: flex;
    align-items: center;
    gap: 24px;
    max-width: var(--layout-width-read);
    margin-bottom: 24px;
}

.pf-c-page .pf-c-author--card .pf-c-author__row .pf-c-avatar {
    flex: 0 0 auto;
    margin: 0;
}

.pf-c-page .pf-c-author--card .pf-c-author__body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}

.pf-c-page .pf-c-author--card .pf-c-author__body > * {
    margin: 0;
}

.pf-c-page .pf-c-author--card .pf-c-author__socials .pf-c-socials {
    margin-bottom: 0;
    justify-content: flex-start;
}

/* Droite : miroir de la gauche. */
.pf-c-page .pf-c-author--card [data-pf-align="right"]:where(:not(.pf-c-header, .pf-c-footer, .pf-c-legal, .pf-c-services__list)) .pf-c-author__row {
    flex-direction: row-reverse;
    margin-left: auto;
    text-align: right;
}

.pf-c-page .pf-c-author--card [data-pf-align="right"]:where(:not(.pf-c-header, .pf-c-footer, .pf-c-legal, .pf-c-services__list)) .pf-c-author__body {
    align-items: flex-end;
}

.pf-c-page .pf-c-author--card [data-pf-align="right"]:where(:not(.pf-c-header, .pf-c-footer, .pf-c-legal, .pf-c-services__list)) .pf-c-author__socials .pf-c-socials {
    justify-content: flex-end;
}

/* Centre : pile verticale centrée. */
.pf-c-page .pf-c-author--card [data-pf-align="center"]:where(:not(.pf-c-header, .pf-c-footer, .pf-c-legal, .pf-c-services__list)) .pf-c-author__row {
    flex-direction: column;
    margin-inline: auto;
    text-align: center;
}

.pf-c-page .pf-c-author--card [data-pf-align="center"]:where(:not(.pf-c-header, .pf-c-footer, .pf-c-legal, .pf-c-services__list)) .pf-c-author__body {
    align-items: center;
}

.pf-c-page .pf-c-author--card [data-pf-align="center"]:where(:not(.pf-c-header, .pf-c-footer, .pf-c-legal, .pf-c-services__list)) .pf-c-author__socials .pf-c-socials {
    justify-content: center;
}

/* Petit écran : pile verticale quel que soit l'alignement. */
@media screen and (max-width: 700px) {
    .pf-c-page .pf-c-author--card .pf-c-author__row,
    .pf-c-page .pf-c-author--card [data-pf-align="right"]:where(:not(.pf-c-header, .pf-c-footer, .pf-c-legal, .pf-c-services__list)) .pf-c-author__row {
        flex-direction: column;
        align-items: flex-start;
    }

    .pf-c-page .pf-c-author--card [data-pf-align="center"]:where(:not(.pf-c-header, .pf-c-footer, .pf-c-legal, .pf-c-services__list)) .pf-c-author__row {
        align-items: center;
    }

    .pf-c-page .pf-c-author--card [data-pf-align="right"]:where(:not(.pf-c-header, .pf-c-footer, .pf-c-legal, .pf-c-services__list)) .pf-c-author__row {
        align-items: flex-end;
    }
}

}
/* assets/css/public/modules/projects/show/01-card.css */
/* @layer-wrap:site.elements */
@layer site.elements {
/* Part 1/2 de modules/projects/show.css : composant « card » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */

/* Version: 08-10-2026-works-ratio */
/* Version: 19-07-2026 — Projets : cover puis texte (mobile inclus) */

/* Listing projets : format horizontal */
.pf-c-page main [data-pf-ratio="landscape"]:where(:not([data-pf-layout]), [data-pf-layout="grid"]) a.pf-c-card--landscape {
    padding: 0 0 50% 0;
}
}

/* assets/css/public/modules/projects/show/02-hero.css */
/* @layer-wrap:site.elements */
@layer site.elements {
/* Part 2/2 de modules/projects/show.css : composant « hero » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */


.pf-c-page :where(.pf-c-hero):is(.pf-c-page *) :where([data-pf-page-type="single"] .pf-c-hero__body):is(.pf-c-page *) {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* Cover horizontale au-dessus du texte */
.pf-c-page :where(.pf-c-hero):is(.pf-c-page *) .pf-c-hero__cover--wide {
    display: block;
    width: 100%;
    max-width: 100%;
    height: 0;
    padding: 0 0 56.25% 0; /* 16:9 */
    margin: 0 0 1.5rem 0;
    box-sizing: border-box;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    flex: 0 0 auto;
}

.pf-c-page :where(.pf-c-hero):is(.pf-c-page *) :where([data-pf-page-type="single"] .pf-c-hero__body):is(.pf-c-page *) :where([data-pf-page-type="single"] .pf-c-hero__text):is(.pf-c-page *) {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
}

@media screen and (min-width: 2700px) {
    .pf-c-page :where(.pf-c-hero):is(.pf-c-page *) .pf-c-hero__cover--wide {
        padding-bottom: 0;
        height: 565px;
    }
}

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

    .pf-c-page :where(.pf-c-hero):is(.pf-c-page *) .pf-c-hero__cover--wide {
        display: block;
        width: 100%;
        height: 0;
        padding: 0 0 56.25% 0;
        margin-bottom: 1.25rem;
    }

    .pf-c-page :where(.pf-c-hero):is(.pf-c-page *) :where([data-pf-page-type="single"] .pf-c-hero__body):is(.pf-c-page *) {
        flex-direction: column;
        align-items: flex-start;
        padding-top: 0;
    }

    .pf-c-page :where(.pf-c-hero):is(.pf-c-page *) :where([data-pf-page-type="single"] .pf-c-hero__body):is(.pf-c-page *) :where([data-pf-page-type="single"] .pf-c-hero__text):is(.pf-c-page *) {
        width: 100%;
        max-width: 100%;
    }

}
}