/* Version: 22-05-2026-20-50 */
/*
 * 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).
 */

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

.content-article {
    font-size: var(--portfolios-font-size-base, 16px);
    line-height: calc(var(--portfolios-font-size-base, 16px) + 10px);
    letter-spacing: 0.4px;
    font-weight: inherit;
    color: inherit;
}

.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: 1.05em;
    line-height: 1.55;
    color: inherit;
    opacity: 0.92;
}

.content-article p.commentaire,
.content-article .writer-editable.commentaire {
    font-size: 0.95em;
    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, 1.8em);
    line-height: calc(var(--portfolios-heading-primary-size, 1.8em) + 10px);
    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, 1.2em);
    line-height: calc(var(--portfolios-heading-secondary-size, 1.2em) + 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;
}

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

.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;
    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-bg-alt-color, transparent);
    box-sizing: border-box;
    filter: none;
    transform: none;
    transition: none;
}

.content-article .writer-figure img:hover,
.content-article .writer-figure img:active {
    box-shadow: var(--portfolios-thumbnail-box-shadow, none);
    filter: none;
    transform: none;
    transition: none;
}

.content-article .writer-figure figcaption {
    font-size: 0.9em;
    opacity: 0.85;
    margin-top: 0.35rem;
}

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

.content-article .vimeo {
    padding: 56.25% 0 0 0;
    position: relative;
}

.content-article .vimeo iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.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):hover,
#portfolio_page .content-article :is(.youtube, .vimeo, .dailymotion):active,
#portfolio_page #media-article:is(.youtube, .vimeo, .dailymotion):hover,
#portfolio_page #media-article :is(.youtube, .vimeo, .dailymotion):hover,
#portfolio_page #media-article:is(.youtube, .vimeo, .dailymotion):active,
#portfolio_page #media-article :is(.youtube, .vimeo, .dailymotion):active {
    filter: none;
    transform: none;
    transition: none;
}

/* --------------------------------------------------------------------------
   Liens dans le corps
   -------------------------------------------------------------------------- */

.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 {
    color: var(--folio-button-background-color, var(--portfolios-heading-secondary-color, inherit));
    display: inline;
    vertical-align: baseline;
    padding: 0 0.04em;
    margin: 0;
    border-bottom: 0;
    border-radius: 0.18em;
    text-decoration-line: underline;
    text-decoration-thickness: 0.08em;
    text-decoration-color: color-mix(in srgb, var(--folio-button-background-color, var(--portfolios-heading-secondary-color, currentColor)) 70%, transparent);
    text-underline-offset: 0.18em;
    text-decoration-skip-ink: auto;
    background: transparent;
    box-shadow: none;
    transition: color 0.15s ease, text-decoration-color 0.15s ease, background-color 0.15s ease;
}

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

.content-article a:not(:is(h1 a, h2 a, h3 a, h4 a, h5 a, h6 a)):hover,
#subtitle-article a:hover {
    color: var(--folio-button-background-color, var(--portfolios-heading-secondary-color, inherit));
    text-decoration-color: currentColor;
    background-color: color-mix(in srgb, var(--folio-button-background-color, var(--portfolios-heading-secondary-color, currentColor)) 8%, transparent);
}

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

/* Aperçu thème manage */
#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(--folio-button-background-color, var(--portfolios-heading-secondary-color, inherit));
    display: inline;
    vertical-align: baseline;
    padding: 0 0.04em;
    margin: 0;
    border-bottom: 0;
    border-radius: 0.18em;
    text-decoration-line: underline;
    text-decoration-thickness: 0.08em;
    text-decoration-color: color-mix(in srgb, var(--folio-button-background-color, var(--portfolios-heading-secondary-color, currentColor)) 70%, transparent);
    text-underline-offset: 0.18em;
    text-decoration-skip-ink: auto;
    background: transparent;
}

#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: none;
}

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

.writer-page .writer-editor.content-article :is(p, span, li, blockquote, h1, h2, h3, h4, h5, h6) {
    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;
}

.writer-page .writer-editor.content-article p.description {
    font-size: 1.05em;
    line-height: 1.55;
}

.writer-page .writer-editor.content-article p.commentaire {
    font-size: 0.95em;
    line-height: 1.5;
}

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

.writer-page .writer-editor.content-article :is(h2, h3, h4, h5, h6) {
    font-size: var(--portfolios-heading-secondary-size, 1.2em) !important;
    line-height: calc(var(--portfolios-heading-secondary-size, 1.2em) + 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)) {
    font-size: inherit !important;
    line-height: inherit !important;
    color: var(--folio-button-background-color, var(--portfolios-heading-secondary-color, inherit)) !important;
    display: inline !important;
    vertical-align: baseline !important;
    padding: 0 0.04em !important;
    margin: 0 !important;
    border-bottom: 0 !important;
    border-radius: 0.18em !important;
    text-decoration-line: underline !important;
    text-decoration-thickness: 0.08em !important;
    text-decoration-color: color-mix(in srgb, var(--folio-button-background-color, var(--portfolios-heading-secondary-color, currentColor)) 70%, transparent) !important;
    text-underline-offset: 0.18em !important;
    text-decoration-skip-ink: auto !important;
    background: transparent !important;
    box-shadow: 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: none !important;
}

/* 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;
}