/* ============================================================
   Références bibliques cliquables + boîte de versets
   Grammaire du livre d'heures (cf. app.css) : la référence est un lien
   navy souligné d'or, la boîte un petit folio de vélin cerclé d'un double
   filet d'or ; aucun texte en or sur fond clair.
   ============================================================ */

/* --- Le lien dans le texte : navy souligné d'or, comme tout lien du site ; le soulignement
   en pointillé signale qu'il ouvre une boîte de versets plutôt qu'une autre page. Le rouge
   reste aux rubriques et aux intertitres. Sélecteur .post-content repris pour l'emporter
   sur la règle des articles dans app.css (même spécificité, feuille chargée après). --- */
.bible-ref,
.post-content a.bible-ref {
    color: var(--navy, #1a1a4a);
    text-decoration: underline 1.5px dotted var(--gold, #c9a55a);
    text-underline-offset: 4px;
    border-bottom: 0;
    cursor: pointer;
    white-space: nowrap;            /* « Jn 3,16 » ne se coupe pas en fin de ligne */
    transition: background-color 0.15s, text-decoration-color 0.15s;
}

.bible-ref:hover,
.bible-ref.bible-ref-active,
.post-content a.bible-ref:hover,
.post-content a.bible-ref.bible-ref-active {
    color: var(--navy, #1a1a4a);
    text-decoration-style: solid;
    text-decoration-color: var(--rubrique, #a8322a);
    background: rgba(201, 165, 90, 0.18);
}

.bible-ref:focus-visible {
    outline: 2px solid var(--navy, #1a1a4a);
    outline-offset: 3px;
    border-radius: 2px;
}

/* --- La boîte (popover) : vélin, filet d'or et filet intérieur, sans ombre --- */
.bible-ref-pop {
    position: absolute;
    z-index: 1200;
    width: max-content;
    max-width: min(420px, calc(100vw - 24px));
    padding: 0.85rem 1rem 0.75rem;
    background-color: var(--velin, #f5efe0);
    background-image: var(--grain, none);
    border: 1px solid var(--gold, #c9a55a);
    box-shadow: inset 0 0 0 3px var(--velin, #f5efe0), inset 0 0 0 4px var(--gold, #c9a55a);
    font-family: 'Lora', serif;
    color: var(--ink, #1d1d2e);
    font-size: 0.95rem;
    line-height: 1.6;
}

/* Flèche pointant vers le lien (prolonge le filet extérieur) */
.bible-ref-pop-arrow {
    position: absolute;
    bottom: -7px;
    left: var(--arrow-left, 24px);
    width: 12px;
    height: 12px;
    background: var(--velin, #f5efe0);
    border-right: 1px solid var(--gold, #c9a55a);
    border-bottom: 1px solid var(--gold, #c9a55a);
    transform: translateX(-50%) rotate(45deg);
}

.bible-ref-pop.bible-ref-pop-below .bible-ref-pop-arrow {
    bottom: auto;
    top: -7px;
    border: none;
    border-left: 1px solid var(--gold, #c9a55a);
    border-top: 1px solid var(--gold, #c9a55a);
}

/* Fenêtre trop basse : la boîte a glissé sur le lien, la flèche ne désignerait plus rien */
.bible-ref-pop.bible-ref-pop-libre .bible-ref-pop-arrow { display: none; }

/* En-tête : la référence (« Jean 3, 16-18 »), en rubrique */
.bible-ref-pop-head {
    margin-bottom: 0.5rem;
    padding-bottom: 0.4rem;
    font-family: 'Playfair Display', 'Cormorant Garamond', serif;
    font-style: italic;
    font-weight: 400;
    font-size: 1.05rem;
    line-height: 1.4;
    color: var(--rubrique, #a8322a);
    border-bottom: 1px solid var(--filet, rgba(201, 165, 90, 0.55));
}
.bible-ref-pop-head::before {
    content: "¶ ";
    content: "¶ " / "";
}

/* Pas de hauteur maximale fixe : bible-ref.js ne raccourcit les versets que si la boîte ne tient
   ni au-dessus ni au-dessous du lien (ou dans le feuillet du téléphone). Ils défilent alors, sans
   fermer la boîte ; overscroll-behavior retient le défilement au bout du passage, car le défilement
   de la page, lui, ferme la boîte. Cinq versets au plus. */
.bible-ref-pop-versets {
    margin: 0 0 0.5rem;
    text-align: left;               /* colonne trop étroite pour justifier sans lézardes */
    -webkit-hyphens: auto;
    hyphens: auto;
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* Versets raccourcis, atteints au clavier pour les faire défiler (tabindex posé par bible-ref.js) */
.bible-ref-pop-versets:focus-visible {
    outline: 2px solid var(--navy, #1a1a4a);
    outline-offset: 3px;
}

/* Un fondu au bas de la partie visible signale que le texte continue (sur téléphone, la barre de
   défilement ne paraît qu'au défilement) ; au bout du passage, il ne couvre plus qu'un blanc. */
.bible-ref-pop-versets[tabindex]::after {
    content: "";
    position: sticky;
    bottom: 0;
    display: block;
    height: 1.4em;
    background: linear-gradient(to bottom, rgba(245, 239, 224, 0), var(--velin, #f5efe0));
    pointer-events: none;
}

/* Numéros de versets : discrets, en rubrique (comme sur la page Bible) */
.bible-ref-pop-num {
    margin: 0 0.3em 0 0.1em;
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    font-size: 0.62em;
    line-height: 0;
    vertical-align: 0.6em;
    font-variant-numeric: lining-nums;
    color: var(--rubrique, #a8322a);
    user-select: none;
}

.bible-ref-pop-texte { color: var(--ink, #1d1d2e); }

.bible-ref-pop-ellipsis {
    color: var(--ink-soft, #4a4a5e);
}

.bible-ref-pop-loading,
.bible-ref-pop-vide {
    padding: 0.15rem 0;
    font-style: italic;
    color: var(--ink-soft, #4a4a5e);
}

/* Pied : « Lire davantage » + source */
.bible-ref-pop-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 0.4rem;
    padding-top: 0.6rem;
    border-top: 1px solid var(--filet, rgba(201, 165, 90, 0.55));
}

/* Même bouton que .btn-primary : navy, filet d'or intérieur, capitales espacées */
.bible-ref-pop-more {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 40px;
    padding: 0.5rem 0.95rem;
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    color: var(--ivory, #fdfdf6);
    background: var(--navy, #1a1a4a);
    border: 0;
    border-radius: 0;
    box-shadow: inset 0 0 0 3px var(--navy, #1a1a4a), inset 0 0 0 4px var(--gold, #c9a55a);
    transition: background-color 0.2s;
}

.bible-ref-pop-more:hover,
.bible-ref-pop-more:focus-visible {
    color: var(--ivory, #fdfdf6);
    background: #23235c;
    box-shadow: inset 0 0 0 3px #23235c, inset 0 0 0 4px var(--gold, #c9a55a);
    text-decoration: none;
}

.bible-ref-pop-more:focus-visible {
    outline: 2px solid var(--navy, #1a1a4a);
    outline-offset: 3px;
}

.bible-ref-pop-more > [aria-hidden="true"] { font-size: 1.3em; line-height: 1; }

.bible-ref-pop-src {
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    font-size: 0.66rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-soft, #4a4a5e);
}

/* Sur téléphone, et dans une fenêtre basse (téléphone à l'horizontale, fort zoom), un feuillet
   posé en bas de l'écran, sous la barre fixe : il tient toujours dans la fenêtre. Seuls les versets
   y défilent, la tête et le bouton « Lire davantage », qui reçoit le focus, restent visibles.
   Les !important surclassent la position écrite par bible-ref.js. */
@media (max-width: 600px), (max-height: 500px) {
    .bible-ref-pop {
        position: fixed;
        top: auto !important;
        right: 8px;
        bottom: 8px;
        left: 8px !important;
        display: flex;
        flex-direction: column;
        width: auto;
        max-width: 36rem;               /* à l'horizontale, une ligne qui reste lisible */
        margin-inline: auto;
        max-height: calc(100vh - 96px);
        max-height: calc(100dvh - 96px);
        font-size: 0.92rem;
        line-height: 1.55;
    }
    .bible-ref-pop-head { flex: none; }
    .bible-ref-pop-body {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0;
    }
    .bible-ref-pop-versets { flex: 0 1 auto; min-height: 0; }
    .bible-ref-pop-foot { flex: none; }
    .bible-ref-pop-arrow { display: none; }
}

@media (forced-colors: active) {
    .bible-ref-pop { border: 1px solid CanvasText; }
}