/* Feuille de style du portail : lecture, justification par langue, accessibilité,
   impression. Elle ne remplace pas les utilitaires, elle les corrige. */

/* --- Lecture ------------------------------------------------------------ */

.prose {
    max-width: var(--largeur-lecture);
    line-height: 1.65;
    text-wrap: pretty;
}

.prose>*+* {
    margin-top: var(--espace-4);
}

.prose h2,
.prose h3 {
    margin-top: var(--espace-8);
}

.prose ul,
.prose ol {
    padding-left: var(--espace-6);
    list-style: revert;
}

.prose ul li {
    list-style: disc;
}

.prose ol li {
    list-style: decimal;
}

.prose blockquote {
    border-left: 3px solid var(--color-accent-primary);
    padding-left: var(--espace-4);
    color: var(--color-text-secondary);
    font-style: italic;
}

.prose figure {
    margin: var(--espace-6) 0;
}

.prose figcaption {
    font-size: 0.85rem;
    color: var(--color-text-tertiary);
    margin-top: var(--espace-2);
}

/* Ancre : le titre ne passe pas sous l'en-tête collé. */
:target,
.prose h2[id],
.prose h3[id] {
    scroll-margin-top: 5rem;
}

/* --- Justification : langues latines seulement, corps des articles -------- */

html[lang="fr"] .prose,
.prose[lang="fr"],
html[lang="en"] .prose,
.prose[lang="en"],
html[lang="es"] .prose,
.prose[lang="es"],
html[lang="it"] .prose,
.prose[lang="it"],
html[lang="pt"] .prose,
.prose[lang="pt"],
html[lang="de"] .prose,
.prose[lang="de"],
html[lang="nl"] .prose,
.prose[lang="nl"],
html[lang="pl"] .prose,
.prose[lang="pl"],
html[lang="ro"] .prose,
.prose[lang="ro"],
html[lang="cs"] .prose,
.prose[lang="cs"],
html[lang="tr"] .prose,
.prose[lang="tr"],
html[lang="id"] .prose,
.prose[lang="id"],
html[lang="vi"] .prose,
.prose[lang="vi"],
html[lang="uk"] .prose,
.prose[lang="uk"],
html[lang="el"] .prose,
.prose[lang="el"] {
    text-align: justify;
    text-align-last: left;
    hyphens: auto;
    hyphenate-limit-chars: 6 3 2;
}

/* Écritures orientales et non latines : alignement d'origine, sans césure. */
html[lang="zh"] .prose,
.prose[lang="zh"],
.prose[lang="zh"],
html[lang="ja"] .prose,
.prose[lang="ja"],
.prose[lang="ja"],
html[lang="ko"] .prose,
.prose[lang="ko"],
.prose[lang="ko"],
html[lang="ar"] .prose,
.prose[lang="ar"],
html[lang="fa"] .prose,
.prose[lang="fa"],
html[lang="he"] .prose,
.prose[lang="he"],
html[lang="hi"] .prose,
.prose[lang="hi"],
html[lang="th"] .prose,
.prose[lang="th"] {
    text-align: start;
    hyphens: none;
}

html[lang="ar"],
html[lang="fa"],
html[lang="he"],
.prose[lang="ar"],
.prose[lang="fa"],
.prose[lang="he"] {
    direction: rtl;
}

/* Les langues orientales respirent : pas de colonne étirée. */
html[lang="zh"] .prose,
.prose[lang="zh"],
.prose[lang="zh"],
html[lang="ja"] .prose,
.prose[lang="ja"],
.prose[lang="ja"],
html[lang="ko"] .prose,
.prose[lang="ko"] {
    max-width: 44em;
    line-height: 1.9;
}

/* --- Accessibilité ------------------------------------------------------- */

.lien-evitement {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--color-bg-primary);
    color: var(--color-text-primary);
    padding: var(--espace-2) var(--espace-4);
    z-index: 100;
    border: 1px solid var(--color-border);
}

.lien-evitement:focus {
    left: var(--espace-4);
    top: var(--espace-4);
}

:focus-visible {
    outline: 2px solid var(--color-accent-primary);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* --- Mode clair/sombre --------------------------------------------------- */

.bascule-mode {
    display: inline-flex;
    align-items: center;
    gap: var(--espace-1);
    padding: var(--espace-1) var(--espace-2);
    border: 1px solid var(--color-border);
    border-radius: var(--rayon);
    background: transparent;
    color: var(--color-text-secondary);
    font-size: 0.8rem;
    cursor: pointer;
    min-height: 2.75rem;
}

/* --- Impression ---------------------------------------------------------- */

@media print {

    header,
    footer,
    nav,
    .lien-evitement,
    .bascule-mode {
        display: none !important;
    }

    html,
    body {
        background: #fff !important;
        color: #000 !important;
    }

    .prose {
        max-width: none;
        text-align: justify;
    }

    a {
        color: #000;
        text-decoration: underline;
    }

    a[href^="/"]::after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
    }

    .prose img {
        max-width: 100% !important;
        page-break-inside: avoid;
    }

    h1,
    h2,
    h3 {
        page-break-after: avoid;
    }
}