/* Explorateur documentaire par passage - surface visuelle.
   Palette ivoire et encre brune ; le noir est cantonne au bandeau de commande.
   Tous les selecteurs du contrat UI sont conserves. */

:root {
    --pr-canvas: #faf7f1;
    --pr-canvas-deep: #f3ede2;
    --pr-surface: #fff;
    --pr-ink: #2a2622;
    --pr-ink-soft: #4a433c;
    --pr-muted: #7a7168;
    --pr-line: #e6dfd3;
    --pr-accent: #7a4a21;
    --pr-accent-dark: #5a3416;
    --pr-accent-wash: rgba(122, 74, 33, .09);
    --pr-gold: #ffbf40;
    --pr-premium: #a8321f;
    --pr-bar: #1e1c1a;
    --pr-bar-soft: #2b2724;
    --pr-bar-line: #3a3632;
    --pr-bar-ink: #c9c1b6;
    --pr-bar-dim: #8a8078;
    --pr-serif: "Gentium Plus", "Gentium Book Basic", Georgia, serif;
    --pr-display: "Gentium Book Basic", "Gentium Plus", Georgia, serif;
    --pr-ui: "Segoe UI", system-ui, Arial, sans-serif;
    /* En rem et non en ch : l'unite ch depend de la police de chaque element,
       et l'en-tete en sans-serif n'obtenait pas la meme largeur que le corps
       en Gentium, d'ou un decalage entre le titre et le texte. */
    --pr-measure: 41rem;
    --pr-aside: 146px;
}

/* ---------- Integration dans la page ---------- */

/* L'explorateur peint lui-meme toute la hauteur utile. Ce conteneur est un
   enfant direct de #main_section et le seul visible quand l'outil est ouvert :
   peindre ici, et non sur #main_section, garantit que le fond ne peut pas
   deborder sur les autres onglets.
   L'ombre portee prolonge l'ivoire sur le `padding-bottom` de #main_section
   (styleuimain.css), sans quoi une bande de fond historique reapparaissait
   sous le contenu. Une hauteur supplementaire aurait fait le meme office, mais
   au prix d'un defilement parasite sur les contenus courts. */
#div_references.pr-active {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 100%;
    padding: 0 !important;
    cursor: default !important;
    background: var(--pr-canvas);
    box-shadow: 0 40px 0 var(--pr-canvas);
    box-sizing: border-box;
}

#div_references.pr-active #home_ency,
#div_references.pr-active #spency { display: none !important; }

/* Le conteneur de defilement est peint tant que l'explorateur est visible :
   peindre le seul panneau ne suffit pas, il subsiste sinon une bande de fond
   historique sous le contenu.

   ATTENTION. #main_section est partage par tous les onglets. Cette classe a
   deja debordé une fois sur l'onglet Passage parce que son retrait dependait
   d'un gestionnaire de clic ne couvrant que quatre entrees de menu : toute
   autre sortie - barre d'outils du bas, comparaison de versions, barre de
   recherche - laissait le beige en place.
   Elle est desormais posee ET retiree par un MutationObserver qui suit
   l'affichage reel de #div_references (voir watchExplorerVisibility dans
   js00.js). Ne jamais revenir a un pilotage par evenement de clic. */
#main_section.pr-reference-mode {
    background: var(--pr-canvas) !important;
    background-image: none !important;
}

#div_references.pr-active #ref_references,
#div_references.pr-active #ref_references_contenu {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    min-height: 100%;
}

#div_references.pr-active #ref_references_contenu { display: block !important; }

.pr-explorer {
    width: 100%;
    min-width: 0;
    min-height: 100%;
    color: var(--pr-ink);
    background: var(--pr-canvas);
    font-family: var(--pr-ui);
    animation: pr-explorer-in .3s ease-out both;
}

/* Arrivee de l'outil : fondu sur l'ensemble, glissement sur le seul contenu.
   Aucune `transform` sur .pr-explorer ni sur .pr-stage : ce sont les ancetres
   du bandeau collant, et une transform remanente leur ferait perdre le sticky. */
@keyframes pr-explorer-in { from { opacity: 0; } to { opacity: 1; } }

.pr-status, .pr-results { animation: pr-content-in .38s cubic-bezier(.22, .7, .28, 1) both; }

@keyframes pr-content-in {
    from { opacity: 0; transform: translateX(28px); }
    to { opacity: 1; transform: translateX(0); }
}

/* ---------- Bandeau de commande unique ---------- */

.pr-hero {
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--pr-bar);
    box-shadow: 0 1px 0 var(--pr-bar-line), 0 6px 18px rgba(30, 28, 26, .13);
}

/* .pr-chrome est porte par le meme element que .pr-hero : ne jamais y declarer
   de `position`, cela ecraserait le `sticky` ci-dessus (specificite egale,
   regle plus tardive) et le bandeau cesserait de tenir en haut. */
.pr-chrome { z-index: 20; }

.pr-bar-line {
    display: flex;
    min-width: 0;
    align-items: baseline;
    gap: 14px;
    padding: 11px clamp(16px, 4vw, 54px) 9px;
    border-bottom: 1px solid var(--pr-bar-line);
}

#pr-passage {
    flex: 0 0 auto;
    color: #f5efe5;
    font: 400 1.12rem/1.15 var(--pr-display);
    letter-spacing: .01em;
}

.pr-summary {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    overflow: hidden;
    color: var(--pr-bar-dim);
    font-size: .76rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Acces a la consultation reference par reference (surface historique). */
.pr-open.pr-legacy {
    flex: 0 0 auto;
    min-height: 28px;
    padding: 0 11px;
    border: 1px solid var(--pr-bar-line);
    border-radius: 999px;
    background: transparent;
    color: var(--pr-bar-ink);
    font: 400 .74rem/1 var(--pr-display);
}

.pr-open.pr-legacy:hover {
    border-color: var(--pr-gold);
    background: var(--pr-bar-soft);
    color: var(--pr-gold);
}

.pr-open.pr-legacy i { font-size: .64rem; }
.pr-open.pr-legacy:hover i { transform: none; }

/* Barre filtre et tri : masquee par SHOW_TOOLBAR, mais stylee pour que la
   bascule reste immediatement operationnelle. */
.pr-toolbar {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 12px;
    padding: 9px clamp(16px, 4vw, 54px);
    border-bottom: 1px solid var(--pr-bar-line);
}

.pr-search {
    display: flex;
    flex: 1 1 460px;
    min-width: 160px;
    align-items: center;
    gap: 9px;
    padding: 0 12px;
    border: 1px solid var(--pr-bar-line);
    border-radius: 6px;
    background: var(--pr-bar-soft);
    color: var(--pr-bar-dim);
}

.pr-search:focus-within { border-color: var(--pr-gold); }

.pr-search input {
    width: 100%;
    min-width: 0;
    min-height: 34px;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: #f0e7da;
    font: inherit;
}

.pr-sort { display: flex; flex: 0 0 auto; align-items: center; gap: 8px; color: var(--pr-bar-dim); font-size: .76rem; }

.pr-sort select {
    min-height: 34px;
    padding: 0 26px 0 9px;
    border: 1px solid var(--pr-bar-line);
    border-radius: 6px;
    background: var(--pr-bar-soft);
    color: var(--pr-bar-ink);
}

/* ---------- Categories ---------- */

.pr-tabs {
    display: flex;
    width: 100%;
    min-width: 0;
    gap: 0;
    padding: 0 clamp(10px, 3.4vw, 46px);
    overflow-x: auto;
    background: var(--pr-bar);
    box-sizing: border-box;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
}

.pr-tabs::-webkit-scrollbar { display: none; }

.pr-tab {
    display: inline-flex;
    flex: 0 0 auto;
    min-height: 40px;
    align-items: center;
    gap: 7px;
    padding: 0 13px;
    white-space: nowrap;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--pr-bar-ink);
    cursor: pointer;
    font: 400 .87rem/1 var(--pr-display);
    transition: color .15s ease, border-color .15s ease;
}

.pr-tab i { font-size: .78rem; opacity: .6; }
.pr-tab:hover { color: #f0e7da; }
.pr-tab:hover i { opacity: .85; }

.pr-tab[aria-selected="true"] {
    border-bottom-color: var(--pr-gold);
    color: var(--pr-gold);
}

.pr-tab[aria-selected="true"] i { opacity: 1; }

.pr-tab b {
    min-width: 19px;
    padding: 2px 5px;
    border-radius: 999px;
    background: var(--pr-bar-soft);
    color: var(--pr-bar-dim);
    font: 600 .63rem/1.35 var(--pr-ui);
    text-align: center;
}

.pr-tab[aria-selected="true"] b { background: rgba(255, 191, 64, .16); color: var(--pr-gold); }

.pr-tab:focus-visible,
.pr-open:focus-visible,
.pr-entry-link:focus-visible,
.pr-reader-back:focus-visible,
.pr-exit:focus-visible,
.pr-scripture-ref:focus-visible {
    outline: 2px solid var(--pr-gold);
    outline-offset: -2px;
}

.pr-stage:focus-visible,
.pr-results:focus-visible { outline: none; }

/* ---------- Scene ---------- */

.pr-stage {
    width: 100%;
    min-width: 0;
    min-height: 460px;
    overflow-x: clip;
    background: var(--pr-canvas);
}

.pr-view[hidden] { display: none !important; }

.pr-library-view,
.pr-reader-view {
    width: min(1180px, calc(100% - 44px));
    margin: 0 auto;
    box-sizing: border-box;
}

.pr-library-view.is-restored { animation: pr-library-return .24s ease-out both; }

.pr-status {
    padding: 20px 0 6px;
    color: var(--pr-muted);
    font-size: .78rem;
    letter-spacing: .01em;
}

.pr-results { min-height: 300px; padding: 0 0 60px; }
.pr-group { margin-top: 10px; }
.pr-group + .pr-group { margin-top: 38px; }

.pr-group > header { position: relative; margin: 0 0 6px; padding: 2px 0 12px 14px; }

.pr-group > header::before {
    content: "";
    position: absolute;
    top: 4px;
    bottom: 12px;
    left: 0;
    width: 2px;
    background: var(--pr-accent);
}

.pr-group > header h2 { margin: 0; color: var(--pr-ink); font: 700 1.22rem/1.25 var(--pr-display); }
.pr-group > header p { margin: 4px 0 0; color: var(--pr-muted); font-size: .79rem; }

/* ---------- Fiches de ressource ---------- */

.pr-resource-list { width: 100%; border-top: 1px solid var(--pr-line); }

.pr-resource {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) minmax(128px, 168px);
    gap: 18px;
    min-width: 0;
    align-items: center;
    padding: 16px 12px;
    border-bottom: 1px solid var(--pr-line);
    background: transparent;
    transition: background-color .16s ease;
}

.pr-resource:hover,
.pr-resource:focus-within { background: var(--pr-surface); }

.pr-cover { display: flex; align-items: center; justify-content: center; }

.pr-cover img {
    width: 52px;
    height: 70px;
    object-fit: cover;
    border-left: 2px solid rgba(42, 38, 34, .22);
    border-radius: 2px;
    background: var(--pr-canvas-deep);
    box-shadow: 0 2px 7px rgba(42, 38, 34, .17);
}

/* Substitut sobre lorsque la couverture est absente : jamais de faux visuel.
   Il est toujours present dans le DOM et ne se revele que si l'image manque
   au catalogue ou echoue au chargement. */
.pr-cover img + .pr-card-icon,
.pr-reader-source img + .pr-card-icon { display: none; }

.pr-cover img[hidden] + .pr-card-icon,
.pr-reader-source img[hidden] + .pr-card-icon { display: grid; }

.pr-card-icon {
    display: grid;
    width: 46px;
    height: 62px;
    place-items: center;
    border: 1px solid var(--pr-line);
    border-left: 2px solid rgba(122, 74, 33, .3);
    border-radius: 2px;
    background: var(--pr-canvas-deep);
    color: #a89c8b;
    font-size: 1.05rem;
}

.pr-resource-content { min-width: 0; }

.pr-card-meta {
    margin-bottom: 5px;
    color: var(--pr-muted);
    font: 600 .65rem/1 var(--pr-ui);
    letter-spacing: .09em;
    text-transform: uppercase;
}

.pr-kind.is-premium { color: var(--pr-premium); }

/* Nom de l'ouvrage, affiche seulement quand le titre de la fiche est une
   section et non l'ouvrage lui-meme. */
.pr-work { color: var(--pr-accent); font-weight: 600; }
.pr-work::before { content: " \00b7 "; color: var(--pr-muted); font-weight: 400; }
.pr-resource h3 { margin: 0; color: var(--pr-ink); font: 700 1.02rem/1.3 var(--pr-display); }
.pr-reason { margin: 4px 0 0; color: var(--pr-accent); font: 400 .82rem/1.4 var(--pr-serif); }

.pr-excerpt {
    display: -webkit-box;
    margin: 5px 0 0;
    overflow: hidden;
    color: var(--pr-ink-soft);
    font: 400 .86rem/1.45 var(--pr-serif);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.pr-resource-action {
    display: flex;
    min-width: 0;
    align-items: flex-end;
    flex-direction: column;
    gap: 9px;
    text-align: right;
}

.pr-resource-action > b { color: var(--pr-ink-soft); font: 600 .92rem/1 var(--pr-ui); }
.pr-resource-action > b span { color: var(--pr-muted); font-size: .71rem; font-weight: 400; }

.pr-open {
    display: inline-flex;
    min-height: 32px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 13px;
    border: 1px solid #cfc2b0;
    border-radius: 999px;
    background: transparent;
    color: var(--pr-accent);
    cursor: pointer;
    font: 400 .84rem/1 var(--pr-display);
    transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}

.pr-open:hover {
    border-color: var(--pr-accent);
    background: var(--pr-accent-wash);
    color: var(--pr-accent-dark);
}

.pr-open i { font-size: .66rem; transition: transform .16s ease; }
.pr-open:hover i { transform: translateX(3px); }
.pr-open.is-loading { opacity: .45; pointer-events: none; }
.pr-open:disabled { opacity: .45; }

/* ---------- Etats ---------- */

.pr-empty {
    display: grid;
    min-height: 300px;
    place-items: center;
    align-content: center;
    color: var(--pr-muted);
    text-align: center;
}

.pr-empty i { margin-bottom: 12px; color: #c3b8a6; font-size: 1.7rem; }
.pr-empty h2 { margin: 3px; color: var(--pr-ink-soft); font: 400 1.15rem/1.3 var(--pr-display); }
.pr-empty p { margin: 3px; font-size: .85rem; }

.pr-loading { border-top: 1px solid var(--pr-line); }

.pr-loading span {
    display: block;
    height: 84px;
    border-bottom: 1px solid var(--pr-line);
    background: linear-gradient(100deg, transparent 14%, rgba(255, 255, 255, .9) 38%, transparent 62%);
    background-size: 210% 100%;
    animation: pr-shimmer 1.15s infinite linear;
}

/* ---------- Lecteur ---------- */

.pr-reader-view {
    min-height: 500px;
    padding: 0 0 76px;
    background: transparent;
    transform-origin: right center;
}

.pr-reader-view.is-entering { animation: pr-reader-in .28s cubic-bezier(.2, .75, .25, 1) both; }
.pr-reader-view.is-returning { animation: pr-reader-return .24s ease-out both; }
.pr-reader-view.is-leaving { animation: pr-reader-out .22s ease-in both; }

.pr-reader-nav {
    position: sticky;
    top: var(--pr-hero-height, 88px);
    z-index: 15;
    display: flex;
    min-height: 46px;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    border-bottom: 1px solid var(--pr-line);
    background: rgba(250, 247, 241, .96);
    backdrop-filter: blur(8px);
    color: var(--pr-muted);
    font-size: .75rem;
}

.pr-reader-back {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--pr-accent);
    cursor: pointer;
    font: 400 .87rem/1.2 var(--pr-display);
    outline: 0 !important;
}

.pr-reader-back:focus-visible { box-shadow: 0 0 0 2px var(--pr-gold); }

.pr-reader-back i {
    display: grid;
    width: 29px;
    height: 29px;
    place-items: center;
    border: 1px solid #cfc2b0;
    border-radius: 50%;
    font-size: .74rem;
    transition: transform .16s ease, border-color .16s ease, background-color .16s ease;
}

.pr-reader-back:hover i {
    transform: translateX(-3px);
    border-color: var(--pr-accent);
    background: var(--pr-accent-wash);
}

/* En-tete d'article : la couverture et le titre de l'ouvrage vivent ici,
   plus jamais dans le corps de la notice. */
/* La couverture est sortie du flux : en grille, sa hauteur dictait celle de
   l'en-tete et repoussait le debut de l'article bien en dessous du titre.
   Elle occupe desormais la gouttiere de droite, que la marge interieure
   reserve, et l'en-tete n'est plus haut que son titre. */
.pr-reader-header {
    position: relative;
    max-width: calc(var(--pr-measure) + var(--pr-aside));
    margin: 0 auto;
    padding: 22px var(--pr-aside) 10px 0;
    box-sizing: border-box;
}

.pr-reader-head-text { min-width: 0; }

.pr-reader-header p {
    margin: 0 0 6px;
    color: var(--pr-accent);
    font: 600 .66rem/1.3 var(--pr-ui);
    letter-spacing: .09em;
    text-transform: uppercase;
}

/* Le surtitre est vide quand le bloc de droite nomme deja l'ouvrage. */
.pr-reader-header p:empty { display: none; }

.pr-reader-header h1 {
    margin: 0;
    color: var(--pr-ink);
    font: 700 clamp(1.22rem, 1.75vw, 1.58rem)/1.28 var(--pr-display);
}

.pr-reader-source {
    position: absolute;
    top: 22px;
    right: 4px;
    display: flex;
    width: 108px;
    align-items: center;
    flex-direction: column;
    gap: 7px;
    text-align: center;
}

.pr-reader-source img {
    width: 76px;
    height: 103px;
    object-fit: cover;
    border-left: 2px solid rgba(42, 38, 34, .24);
    border-radius: 2px;
    background: var(--pr-canvas-deep);
    box-shadow: 0 3px 10px rgba(42, 38, 34, .18);
}

.pr-reader-source .pr-card-icon { width: 60px; height: 80px; font-size: 1.2rem; }

/* Titre d'ouvrage compact : ni capitales ni interlettrage, un long titre y
   occupait cinq lignes et repoussait le debut de l'article. */
.pr-reader-source span {
    display: -webkit-box;
    overflow: hidden;
    color: var(--pr-muted);
    font: 400 .72rem/1.3 var(--pr-serif);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
}

.pr-reader-body {
    max-width: calc(var(--pr-measure) + var(--pr-aside));
    margin: 0 auto;
    padding-right: var(--pr-aside);
    box-sizing: border-box;
    color: var(--pr-ink-soft);
    font: 400 1.06rem/1.72 var(--pr-serif);
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
    -webkit-hyphens: auto;
}

/* La justification ne doit pas s'appliquer aux titres ni aux listes courtes. */
.pr-reader-body h1,
.pr-reader-body h2,
.pr-reader-body h3,
.pr-reader-body h4,
.pr-reader-body li,
.pr-reader-body td,
.pr-reader-body th { text-align: left; hyphens: manual; }

.pr-reader-body > :first-child { margin-top: 0; }
.pr-reader-body img { max-width: 100%; height: auto; }
.pr-reader-body p { margin: 0 0 1.05em; }
.pr-reader-body b, .pr-reader-body strong { color: var(--pr-ink); font-family: var(--pr-display); }

.pr-reader-body h1,
.pr-reader-body h2,
.pr-reader-body h3,
.pr-reader-body h4 {
    margin: 1.6em 0 .5em;
    color: var(--pr-ink);
    font-family: var(--pr-display);
    line-height: 1.3;
}

.pr-reader-body #retour { display: none !important; }

/* Neutralise les cadres legacy sans alterer le contenu. */
.pr-reader-body .box {
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Le noir impose par les <font> legacy est ramene a l'encre du lecteur ;
   les autres couleurs d'article restent intactes. */
/* Les <font color> des articles sont de la mise en forme heritee, sans valeur
   editoriale : un <font color='blue'> non ferme suffisait a faire virer au bleu
   tout le reste de la notice. On neutralise la couleur en bloc ; seuls les
   renvois, qui portent leurs propres classes, restent colores. */
.pr-reader-body font { font-family: inherit; font-size: inherit; }
.pr-reader-body font[color] { color: inherit; }

/* Systeme de renvoi historique. Les ancres `#POPUP&ref=...` sont conservees
   telles quelles : elles savent traiter les chaines ("Ac 1.14; 2.46; 4.24"),
   les plages et la notation pointee, ce que le format `data-ref` ne sait pas
   exprimer. Seule leur couleur est harmonisee, le bleu de lien par defaut
   tranchant avec l'encre brune du reste. */
.pr-reader-body a {
    color: var(--pr-accent);
    cursor: pointer;
    text-decoration: underline;
    text-decoration-color: rgba(122, 74, 33, .32);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.pr-reader-body a:hover,
.pr-reader-body a:focus { color: var(--pr-accent-dark); text-decoration-color: currentColor; }

.pr-reader-body a:focus-visible { outline: 2px solid var(--pr-gold); outline-offset: 2px; }
.pr-reader-body hr { margin: 1.8em 0; border: 0; border-top: 1px solid var(--pr-line); }

.pr-scripture-ref {
    color: var(--pr-accent) !important;
    cursor: pointer;
    text-decoration: underline;
    text-decoration-color: rgba(122, 74, 33, .32);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.pr-scripture-ref:hover { color: var(--pr-accent-dark) !important; text-decoration-color: currentColor; }

/* Renvoi thematique au fil du texte. */
.pr-inline-entry {
    border-bottom: 1px dotted currentColor;
    color: var(--pr-accent);
    cursor: pointer;
}

.pr-inline-entry:hover { color: var(--pr-accent-dark); }

/* Renvoi autonome, issu des boutons .theme-topic des index thematiques :
   presente en pastille plutot qu'en bouton natif du navigateur. */
.pr-reader-body .pr-inline-entry.is-badge {
    display: inline-block;
    margin: 2px 3px 2px 0;
    padding: 3px 11px;
    border: 1px solid #d9cbb6;
    border-bottom-color: #d9cbb6;
    border-radius: 999px;
    background: #fdfaf4;
    color: var(--pr-accent);
    font: 400 .92rem/1.4 var(--pr-serif);
    text-align: left;
    vertical-align: baseline;
    transition: border-color .14s ease, background-color .14s ease, color .14s ease;
}

.pr-reader-body .pr-inline-entry.is-badge:hover {
    border-color: var(--pr-accent);
    background: var(--pr-accent-wash);
    color: var(--pr-accent-dark);
}

.pr-reader-body .pr-inline-entry.is-badge:focus-visible {
    outline: 2px solid var(--pr-gold);
    outline-offset: 1px;
}

/* ---------- Sommaire d'une ressource ---------- */

.pr-article-index { max-width: calc(var(--pr-measure) + var(--pr-aside)); margin: 0 auto; padding-right: var(--pr-aside); box-sizing: border-box; }
.pr-index-intro { margin: 0 0 18px; color: var(--pr-muted); font: 400 .88rem/1.5 var(--pr-serif); }

.pr-article-index ol {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 32px;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--pr-line);
    list-style: none;
}

.pr-article-index li { min-width: 0; border-bottom: 1px solid var(--pr-line); }

.pr-entry-link {
    display: flex;
    width: 100%;
    min-height: 46px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 6px;
    border: 0;
    background: transparent;
    color: var(--pr-ink-soft);
    cursor: pointer;
    font: 400 .95rem/1.35 var(--pr-serif);
    text-align: left;
    transition: background-color .14s ease, color .14s ease;
}

.pr-entry-link:hover { background: var(--pr-surface); color: var(--pr-accent-dark); }
.pr-entry-link i { flex: 0 0 auto; color: #b3a795; font-size: .7rem; }
.pr-entry-link:disabled { opacity: .45; }

/* ---------- Animations ---------- */

@keyframes pr-shimmer { to { background-position-x: -210%; } }
@keyframes pr-reader-in { from { opacity: 0; transform: translateX(64px); } to { opacity: 1; transform: translateX(0); } }
@keyframes pr-reader-return { from { opacity: 0; transform: translateX(-36px); } to { opacity: 1; transform: translateX(0); } }
@keyframes pr-reader-out { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(58px); } }
@keyframes pr-library-return { from { opacity: 0; transform: translateX(-26px); } to { opacity: 1; transform: translateX(0); } }

/* ---------- Largeurs reduites ---------- */

@media (max-width: 980px) {
    :root { --pr-measure: 34rem; --pr-aside: 0px; }
    .pr-reader-header { padding-right: 0; }
    /* Plus de gouttiere a cette largeur : la couverture repasse dans le flux,
       en ligne au-dessus du titre. */
    .pr-reader-source {
        position: static;
        align-items: flex-start;
        flex-direction: row;
        width: auto;
        margin-bottom: 14px;
        gap: 14px;
        text-align: left;
    }

    .pr-reader-source img { width: 62px; height: 84px; }
    .pr-reader-source span { align-self: center; -webkit-line-clamp: 3; }
}

@media (max-width: 820px) {
    .pr-hero { position: relative; }
    .pr-library-view, .pr-reader-view { width: calc(100% - 26px); }
    .pr-resource { grid-template-columns: 52px minmax(0, 1fr); gap: 14px; }
    .pr-resource-action { grid-column: 2; align-items: center; flex-direction: row; justify-content: space-between; text-align: left; }
    .pr-article-index ol { grid-template-columns: 1fr; }
    .pr-reader-nav { top: 0; }
}

@media (max-width: 560px) {
    .pr-bar-line { align-items: flex-start; flex-wrap: wrap; gap: 6px 12px; }
    .pr-summary { flex: 1 1 100%; order: 3; white-space: normal; }
    .pr-resource { padding-inline: 4px; }
    .pr-cover img { width: 44px; height: 60px; }
    .pr-resource-action > b span { display: none; }
    .pr-reader-header { padding-top: 26px; }
}

@media (prefers-reduced-motion: reduce) {
    .pr-explorer,
    .pr-status,
    .pr-results,
    .pr-loading span,
    .pr-reader-view,
    .pr-library-view,
    .pr-open i,
    .pr-reader-back i,
    .pr-tab,
    .pr-resource,
    .pr-entry-link { animation: none !important; transition: none !important; }
}