/* 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 : --portfolios-font-size-base, --portfolios-heading-* (thème portfolio).
 * Les fallbacks gardent un rendu lisible hors thème portfolio (hub Writer, register CGV).
 */

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

.content-article {
    font-size: var(--portfolios-font-size-base, 14px);
    line-height: var(--portfolios-text-line-height, calc(var(--portfolios-font-size-base, 14px) + 10px));
    letter-spacing: 0.4px;
    font-weight: inherit;
    color: inherit;
    --portfolios-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");
    --portfolios-content-link-padding-y: 0.15em;
    --portfolios-content-link-padding-x: 0.42em;
}

.content-article .subtitle,
.content-article .subtitle p {
    margin: 20px 0;
    font-weight: bold;
}

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

.content-article p {
    margin-bottom: 25px;
}

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

.content-article p.commentaire,
.content-article .writer-editable.commentaire {
    font-size: calc(var(--portfolios-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);
}

.content-article u {
    text-decoration: underline;
}

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

.content-article :is(em, i),
.content-article .writer-editable :is(em, i) {
    font-style: italic;
}

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

.content-article h1 {
    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);
    display: block;
    padding: 0;
    margin: 0 0 0.75rem;
}

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

.content-article :is(h2, h3, h4, h5, h6) {
    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(--portfolios-heading-secondary-color, inherit);
}

.content-article h2 {
    margin: 45px 0 0.65rem;
}

.content-article h3 {
    margin: 25px 0 0.65rem;
}

.content-article :is(h4, h5, h6) {
    margin: 0 0 0.65rem;
}

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

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

.content-article p.writer-align-center,
.content-article blockquote p.writer-align-center {
    text-align: center;
}

.content-article p.writer-align-right,
.content-article blockquote p.writer-align-right {
    text-align: right;
}

.content-article p.writer-align-justify,
.content-article blockquote p.writer-align-justify {
    text-align: justify;
}

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

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

.content-article .writer-editable.writer-align-right {
    text-align: right;
}

.content-article .writer-editable.writer-align-justify {
    text-align: justify;
}

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

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

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

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

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

.content-article .writer-column {
    min-width: 0;
}

.content-article .writer-column > :first-child {
    margin-top: 0;
}

.content-article .writer-column > :last-child {
    margin-bottom: 0;
}

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

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

#portfolio_page .content-article blockquote,
#portfolio_page .article .main blockquote,
#theme-visualiser #portfolio_page .content-article blockquote,
#theme-visualiser #portfolio_page .article .main blockquote,
#portfolio_page .content-article blockquote :is(p, span, cite, em, strong, b, i, li),
#portfolio_page .article .main blockquote :is(p, span, cite, em, strong, b, i, li),
#theme-visualiser #portfolio_page .content-article blockquote :is(p, span, cite, em, strong, b, i, li),
#theme-visualiser #portfolio_page .article .main blockquote :is(p, span, cite, em, strong, b, i, li) {
    color: var(--portfolios-body-text-color, var(--portfolios-text-main-color, inherit)) !important;
}

.content-article blockquote {
    position: relative;
    padding: 50px;
    margin-top: 30px;
    margin-bottom: 20px;
}

.content-article blockquote * {
    margin: 0;
    font-weight: bold;
}

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

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

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

.content-article ul,
.content-article ol {
    margin-bottom: 25px;
}

.content-article ul li,
.content-article ol li {
    margin-left: 15px;
    padding-left: 15px;
    margin-bottom: 20px;
    line-height: calc(1em + 15px);
}

.content-article ul li {
    list-style-type: disc;
}

.content-article ol li {
    list-style-type: decimal;
}

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

.content-article .writer-figure {
    margin: 1.5rem 0 2rem;
}

.content-article .writer-figure img {
    display: block;
    margin-bottom: 0.5rem;
    max-width: 100%;
    height: auto;
}

.content-article .writer-figure figcaption {
    font-size: calc(var(--portfolios-font-size-base, 14px) * 0.9);
    opacity: 0.85;
    margin-top: 0.35rem;
}

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

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

.content-article .vimeo {
    padding-bottom: 56.25%;
}

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

.content-article :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;
}

.content-article :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) {

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

}

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

.content-article video {
    height: auto;
}

#portfolio_page .content-article :is(.youtube, .vimeo, .dailymotion, .tiktok, .instagram, .facebook):hover,
#portfolio_page .content-article :is(.youtube, .vimeo, .dailymotion, .tiktok, .instagram, .facebook):active,
#portfolio_page #media-article:is(.youtube, .vimeo, .dailymotion, .tiktok, .instagram, .facebook):hover,
#portfolio_page #media-article :is(.youtube, .vimeo, .dailymotion, .tiktok, .instagram, .facebook):hover,
#portfolio_page #media-article:is(.youtube, .vimeo, .dailymotion, .tiktok, .instagram, .facebook):active,
#portfolio_page #media-article :is(.youtube, .vimeo, .dailymotion, .tiktok, .instagram, .facebook):active {
    filter: none;
    transform: none;
    transition: none;
}

/* --------------------------------------------------------------------------
   Liens dans le corps — rendu bouton (sans bordures ni ombres ; padding compact)
   -------------------------------------------------------------------------- */

.content-article a:not(:is(h1 a, h2 a, h3 a, h4 a, h5 a, h6 a)),
.content-article p a:not(:is(h1 a, h2 a, h3 a, h4 a, h5 a, h6 a)),
#subtitle-article.content-article a,
#subtitle-article.content-article p a,
#subtitle-article a,
#subtitle-article p a,
#theme-visualiser .content-article a:not(:is(h1 a, h2 a, h3 a, h4 a, h5 a, h6 a)),
#theme-visualiser .content-article p a:not(:is(h1 a, h2 a, h3 a, h4 a, h5 a, h6 a)),
#theme-visualiser #subtitle-article a,
#theme-visualiser #subtitle-article p a {
    color: var(--portfolios-button-text-color, #fff) !important;
    background-color: var(--portfolios-button-background-color, #222);
    background-image: var(--portfolios-button-gradient, none);
    border: none !important;
    border-radius: var(--portfolios-button-radius, 0px);
    padding: var(--portfolios-content-link-padding-y) var(--portfolios-content-link-padding-x);
    margin: 0;
    outline: none;
    font-family: var(--portfolios-button-font-family, inherit);
    font-size: var(--portfolios-button-font-size, 1rem) !important;
    font-weight: var(--portfolios-button-font-weight, 500) !important;
    letter-spacing: var(--portfolios-button-letter-spacing, normal);
    text-decoration: none !important;
    text-transform: none;
    display: inline-flex;
    align-items: center;
    gap: var(--portfolios-button-gap, 0.5em);
    vertical-align: baseline;
    box-sizing: border-box;
    max-width: max-content;
    cursor: pointer;
    opacity: var(--portfolios-button-opacity, 1);
}

.content-article a:not(:is(h1 a, h2 a, h3 a, h4 a, h5 a, h6 a))::after,
.content-article p a:not(:is(h1 a, h2 a, h3 a, h4 a, h5 a, h6 a))::after,
#subtitle-article a::after,
#subtitle-article p a::after,
#theme-visualiser .content-article a:not(:is(h1 a, h2 a, h3 a, h4 a, h5 a, h6 a))::after,
#theme-visualiser .content-article p a:not(:is(h1 a, h2 a, h3 a, h4 a, h5 a, h6 a))::after,
#theme-visualiser #subtitle-article a::after,
#theme-visualiser #subtitle-article p a::after {
    content: "";
    display: inline-block;
    width: 0.82em;
    height: 0.82em;
    flex-shrink: 0;
    background-color: currentColor;
    -webkit-mask: var(--portfolios-content-link-icon) no-repeat center / contain;
    mask: var(--portfolios-content-link-icon) no-repeat center / contain;
    opacity: 0.92;
    pointer-events: none;
}

.content-article a:not(:is(h1 a, h2 a, h3 a, h4 a, h5 a, h6 a)):is(:hover, :active),
.content-article p a:not(:is(h1 a, h2 a, h3 a, h4 a, h5 a, h6 a)):is(:hover, :active),
#subtitle-article a:is(:hover, :active),
#subtitle-article p a:is(:hover, :active),
#theme-visualiser .content-article a:not(:is(h1 a, h2 a, h3 a, h4 a, h5 a, h6 a)):is(:hover, :active),
#theme-visualiser .content-article p a:not(:is(h1 a, h2 a, h3 a, h4 a, h5 a, h6 a)):is(:hover, :active),
#theme-visualiser #subtitle-article a:is(:hover, :active),
#theme-visualiser #subtitle-article p a:is(:hover, :active) {
    color: var(--portfolios-button-text-color, #fff) !important;
    background-color: var(--portfolios-button-background-color, #222) !important;
    background-image: var(--portfolios-button-gradient, none) !important;
    box-shadow: none !important;
    transform: none !important;
    filter: none !important;
}

.content-article a:not(:is(h1 a, h2 a, h3 a, h4 a, h5 a, h6 a)):focus-visible,
#subtitle-article a:focus-visible,
#theme-visualiser .content-article a:not(:is(h1 a, h2 a, h3 a, h4 a, h5 a, h6 a)):focus-visible,
#theme-visualiser #subtitle-article a:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--portfolios-button-text-color, currentColor) 58%, transparent);
    outline-offset: 0.18em;
}

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

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

.writer-page .writer-editor.content-article :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.content-article :is(strong, b) {
    font-weight: var(--portfolios-font-weight-bold, 700) !important;
}

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

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

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

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

.writer-page .writer-editor.content-article a:not(:is(h1 a, h2 a, h3 a, h4 a, h5 a, h6 a)),
.writer-page .writer-editor.content-article p a:not(:is(h1 a, h2 a, h3 a, h4 a, h5 a, h6 a)) {
    color: var(--portfolios-button-text-color, #fff) !important;
    background-color: var(--portfolios-button-background-color, #222) !important;
    background-image: var(--portfolios-button-gradient, none) !important;
    border: none !important;
    border-radius: var(--portfolios-button-radius, 0px) !important;
    padding: var(--portfolios-content-link-padding-y) var(--portfolios-content-link-padding-x) !important;
    margin: 0 !important;
    outline: none !important;
    font-family: var(--portfolios-button-font-family, inherit) !important;
    font-size: var(--portfolios-button-font-size, 1rem) !important;
    line-height: normal !important;
    font-weight: var(--portfolios-button-font-weight, 500) !important;
    letter-spacing: var(--portfolios-button-letter-spacing, normal) !important;
    text-decoration: none !important;
    text-transform: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: var(--portfolios-button-gap, 0.5em) !important;
    vertical-align: baseline !important;
    box-sizing: border-box !important;
    max-width: max-content !important;
    cursor: pointer !important;
    opacity: var(--portfolios-button-opacity, 1) !important;
}

.writer-page .writer-editor.content-article a:not(:is(h1 a, h2 a, h3 a, h4 a, h5 a, h6 a)):is(:hover, :active),
.writer-page .writer-editor.content-article p a:not(:is(h1 a, h2 a, h3 a, h4 a, h5 a, h6 a)):is(:hover, :active) {
    color: var(--portfolios-button-text-color, #fff) !important;
    background-color: var(--portfolios-button-background-color, #222) !important;
    background-image: var(--portfolios-button-gradient, none) !important;
    box-shadow: none !important;
    transform: none !important;
    filter: none !important;
}

.writer-page .writer-editor.content-article a:not(:is(h1 a, h2 a, h3 a, h4 a, h5 a, h6 a))::after,
.writer-page .writer-editor.content-article p a:not(:is(h1 a, h2 a, h3 a, h4 a, h5 a, h6 a))::after {
    content: "" !important;
    display: inline-block !important;
    width: 0.82em !important;
    height: 0.82em !important;
    flex-shrink: 0 !important;
    background-color: currentColor !important;
    -webkit-mask: var(--portfolios-content-link-icon) no-repeat center / contain !important;
    mask: var(--portfolios-content-link-icon) no-repeat center / contain !important;
    opacity: 0.92 !important;
    pointer-events: none !important;
}

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

/* Placeholder éditeur (zones contenteditable vides) */
.writer-editor.content-article .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
   -------------------------------------------------------------------------- */

#portfolio_page .content-article img,
#portfolio_page #subtitle-article img,
#portfolio_page #content-article img,
#portfolio_page #blog-main-article img,
#portfolio_page #media-article img,
#portfolio_page .article img,
#portfolio_page #theme-visualiser .content-article img {
    max-width: 100%;
    height: auto;
    box-sizing: border-box;
    filter: none;
    transform: none;
    transition: none;
}

#portfolio_page .content-article img:hover,
#portfolio_page #subtitle-article img:hover,
#portfolio_page #content-article img:hover,
#portfolio_page #blog-main-article img:hover,
#portfolio_page #media-article img:hover,
#portfolio_page .article img:hover,
#portfolio_page #theme-visualiser .content-article img:hover,
#portfolio_page .content-article img:active,
#portfolio_page #subtitle-article img:active,
#portfolio_page #content-article img:active,
#portfolio_page #blog-main-article img:active,
#portfolio_page #media-article img:active,
#portfolio_page .article img:active,
#portfolio_page #theme-visualiser .content-article img:active {
    filter: none;
    transform: none;
    transition: none;
}

/*
 * Fiches de contenu — bloc « A propos » (#about-content).
 *
 * Le titre et la carte de présentation vivent désormais dans un même conteneur
 * `.about-content` qui porte les classes d'alignement admin
 * (portfolios_design_title_align_container_classes). La carte suit donc le même
 * alignement que le titre, au lieu de rester collée à gauche quand le portfolio
 * est réglé en centré ou à droite.
 */
#portfolio_page #about-content .about-content-profil {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
}

#portfolio_page .about-align-left .about-content-profil {
    justify-content: flex-start;
}

#portfolio_page .about-align-center .about-content-profil {
    justify-content: center;
}

#portfolio_page .about-align-right .about-content-profil {
    justify-content: flex-end;
}

#portfolio_page #about-content .about-content-profil-text {
    min-width: 0;
}

/* En colonne, c'est l'axe transversal qui porte l'alignement horizontal. */
@media screen and (max-width: 700px) {
    #portfolio_page #about-content .about-content-profil {
        flex-direction: column;
    }

    #portfolio_page .about-align-left .about-content-profil {
        align-items: flex-start;
    }

    #portfolio_page .about-align-center .about-content-profil {
        align-items: center;
    }

    #portfolio_page .about-align-right .about-content-profil {
        align-items: flex-end;
    }
}