/* Version: 03-10-2026-reading-hub */
/*
 * Confort de lecture (site public uniquement) :
 *  - planchers sur les textes longs (.content-article, .pf-read) : taille mini, interligne, largeur de ligne ;
 *  - préférence visiteur (assets/js/public/reading-tools.js) via --pf-read-scale / --pf-read-lh sur <html>.
 * Les réglages admin restent la base : on ne fait que borner par le bas.
 * Chargé après fonts.css, content.css et headings.css (leurs règles !important sont surclassées par #portfolio_page).
 */

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

#portfolio_page {
    --pf-read-min: 15px;
    --pf-read-measure: 72ch;
}

@media (max-width: 650px) {
    #portfolio_page {
        --pf-read-min: 16px;
    }
}

/* --------------------------------------------------------------------------
   Texte courant
   -------------------------------------------------------------------------- */

#portfolio_page :is(.content-article, .pf-read) :is(p, li, dd, td, th, blockquote, figcaption, span, a, em, strong, code, small):not(:is(h1, h2, h3, h4, h5, h6, .pf-reading-tools) *) {
    font-size: calc(max(var(--portfolios-font-size-base, 14px), var(--pf-read-min)) * var(--pf-read-scale, 1)) !important;
    line-height: max(var(--portfolios-text-line-height, 0px), calc(1em * var(--pf-read-lh, 1.75))) !important;
    overflow-wrap: break-word;
}

/* Description / chapô : proche du texte courant (pas plus de 1.1x), et suit le réglage visiteur */
#portfolio_page :is(.content-article, .pf-read) :is(p.description, .writer-editable.description) {
    font-size: calc(max(var(--portfolios-font-size-base, 14px), var(--pf-read-min)) * 1.05 * var(--pf-read-scale, 1)) !important;
    opacity: 1;
}

#portfolio_page main #subtitle-article h2.subtitle,
#portfolio_page main #subtitle-article h2.subtitle :is(p, span, a, strong, em, b, i, small) {
    font-size: calc(max(var(--portfolios-font-size-base, 14px), var(--pf-read-min)) * 1.1 * var(--pf-read-scale, 1)) !important;
    line-height: calc(1em * var(--pf-read-lh, 1.75) * 0.9) !important;
    font-weight: 600 !important;
}

/* Interligne de base des paragraphes hors zones .content-article (modules, accueil...) */
#portfolio_page main :is(p, dd):not(:is(.content-article, .pf-read, .social-medias, button, a, .arkt-btn, .pf-thumbs--landscape, .pf-thumbs--square, .pf-thumbs--portrait, h1, h2, h3, h4, h5, h6) *):not(.pf-reading-tools__title) {
    line-height: max(var(--portfolios-text-line-height, 0px), calc(1em * var(--pf-read-lh, 1.75))) !important;
}

#portfolio_page :is(.content-article, .pf-read) :is(p.commentaire, .writer-editable.commentaire, figcaption) {
    font-size: calc(max(var(--portfolios-font-size-base, 14px), var(--pf-read-min)) * 0.92 * var(--pf-read-scale, 1)) !important;
}

#portfolio_page :is(.content-article, .pf-read) :is(p, ul, ol, dl) {
    margin-bottom: 1em;
    hyphens: auto;
}

#portfolio_page :is(.content-article, .pf-read) :is(p, ul, ol, dl, blockquote):not(:is(.writer-columns, .writer-figure, table) *) {
    max-width: var(--pf-read-measure);
}

#portfolio_page :is(.content-article, .pf-read) :is(ul, ol) li {
    margin-bottom: 0.5em;
}

/* --------------------------------------------------------------------------
   Titres dans les textes : suivent le réglage visiteur (leurs tailles sont des px calculés en PHP)
   -------------------------------------------------------------------------- */

#portfolio_page :is(.content-article, .pf-read) h1 {
    font-size: calc(var(--portfolios-heading-primary-size, 2em) * var(--pf-read-scale, 1)) !important;
}

#portfolio_page :is(.content-article, .pf-read) :is(h2, h3, h4, h5, h6) {
    font-size: calc(var(--portfolios-heading-secondary-size, 1.4em) * var(--pf-read-scale, 1)) !important;
}

#portfolio_page :is(.content-article, .pf-read) :is(h1, h2, h3, h4, h5, h6):not(.subtitle) {
    line-height: max(var(--portfolios-heading-secondary-line-height, 0px), 1.3em) !important;
}

#portfolio_page :is(.content-article, .pf-read) :is(h1, h2, h3, h4, h5, h6) {
    text-wrap: balance;
    overflow-wrap: break-word;
}

/* --------------------------------------------------------------------------
   Citations : moins massives, lisibles
   -------------------------------------------------------------------------- */

#portfolio_page .content-article blockquote {
    padding: 1.25em 1.5em 1.25em 3.25em;
    margin-top: 1.5em;
    margin-bottom: 1.25em;
    border-left: 3px solid color-mix(in srgb, currentColor 35%, transparent);
}

#portfolio_page .content-article blockquote * {
    font-weight: 500;
    font-style: italic;
}

#portfolio_page .content-article blockquote::before {
    font-size: 2.5rem;
    line-height: 1;
    left: 0.75rem;
    top: 0.5rem;
    opacity: 0.55;
}

#portfolio_page .content-article blockquote::after {
    content: none;
}

/* --------------------------------------------------------------------------
   Méta : plancher de lisibilité
   -------------------------------------------------------------------------- */

#portfolio_page :is(.article-blog-infos__meta, .article-blog-infos__description, #profil-infos .date, #profil-infos .author) {
    font-size: max(var(--portfolios-font-size-meta, 12px), 12px) !important;
    line-height: 1.5 !important;
}

/* --------------------------------------------------------------------------
   Contrôles visiteur (confort de lecture + partage d'article)
   Règles du hub : fantômes, sans fond ni ombre au repos ; au survol, léger fond teinté de l'encre
   (8 %, comme --ak-state-hover) ; monochrome, aucune couleur de bouton ou d'accent du thème.
   L'encre reste celle du texte de la page : ces contrôles sont posés sur le fond du portfolio.
   -------------------------------------------------------------------------- */

#portfolio_page {
    --pf-ctl-ink: var(--portfolios-body-text-color, var(--portfolios-text-main-color, currentColor));
    --pf-ctl-ink-soft: color-mix(in srgb, var(--pf-ctl-ink) 72%, transparent);
    --pf-ctl-line: color-mix(in srgb, var(--pf-ctl-ink) 16%, transparent);
    --pf-ctl-tint: color-mix(in srgb, var(--pf-ctl-ink) 8%, transparent);
    --pf-ctl-size: 34px;
}

.pf-reading-tools[hidden] {
    display: none;
}

.pf-reading-tools__title {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.pf-reading-tools__group {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px;
    border: 1px solid var(--pf-ctl-line);
    border-radius: 999px;
    color: var(--pf-ctl-ink-soft);
}

.pf-reading-tools__btn,
.pf-act {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--pf-ctl-size);
    height: var(--pf-ctl-size);
    padding: 0 0.5rem;
    margin: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    box-shadow: none;
    color: inherit;
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.pf-act svg,
.pf-act svg :is(path, circle, rect, polygon),
.pf-reading-tools__btn svg :is(path, circle, rect) {
    transition: fill 0.3s ease, stroke 0.3s ease, color 0.3s ease;
}

.pf-act svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
    stroke: none;
}

.pf-reading-tools__btn svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.pf-reading-tools__btn:hover:not(:disabled),
.pf-reading-tools__btn:focus-visible,
.pf-act:is(:hover, :focus-visible) {
    background: var(--pf-ctl-tint);
    color: var(--pf-ctl-ink);
}

/* Barre d'article : passe devant les styles de liens et boutons du thème (même rendu fantôme). */
#portfolio_page .article-meta-block .pf-act:is(:hover, :focus-visible, .is-copied),
#portfolio_page .article-meta-block .pf-reading-tools__btn:is(:hover, :focus-visible):not(:disabled) {
    background: var(--pf-ctl-tint) !important;
    color: var(--pf-ctl-ink) !important;
    filter: none !important;
    box-shadow: none !important;
}

#portfolio_page .article-meta-block .pf-act:is(:hover, :focus-visible, .is-copied) svg,
#portfolio_page .article-meta-block .pf-act:is(:hover, :focus-visible, .is-copied) svg :is(path, circle, rect, polygon) {
    fill: var(--pf-ctl-ink) !important;
    color: var(--pf-ctl-ink) !important;
}

#portfolio_page .article-meta-block .pf-reading-tools__btn:is(:hover, :focus-visible):not(:disabled) svg :is(path, circle, rect) {
    stroke: var(--pf-ctl-ink) !important;
    color: var(--pf-ctl-ink) !important;
}

.pf-reading-tools__btn:focus-visible,
.pf-act:focus-visible {
    outline: 2px solid var(--pf-ctl-ink);
    outline-offset: 1px;
}

.pf-reading-tools__btn:disabled {
    opacity: 0.3;
    cursor: default;
}

.pf-reading-tools__value {
    min-width: 3.2em;
    text-align: center;
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
    color: var(--pf-ctl-ink-soft);
}

.pf-reading-tools__sep {
    align-self: stretch;
    width: 1px;
    margin: 9px 2px;
    background: var(--pf-ctl-line);
}

.pf-reading-tools--compact {
    margin: 0 0 1.5rem;
}

/* Partage : icônes fantômes (markup dédié, indépendant du design « social » du portfolio) */
.pf-article-actions {
    display: flex;
    align-items: center;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--pf-ctl-ink-soft);
}

.pf-article-actions li {
    margin: 0;
    padding: 0;
    list-style: none;
}

.pf-act.is-copied {
    color: var(--pf-ctl-ink);
    background: var(--pf-ctl-tint);
}

@media (max-width: 480px) {
    #portfolio_page #blog-main-article .blog-article-bar {
        justify-content: flex-start;
    }
}