/* /Components/Layout/EmptyLayout.razor.rz.scp.css */
#blazor-error-ui[b-wv9d79y0s3] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-wv9d79y0s3] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/Header.razor.rz.scp.css */
/* ============================================================
   HEADER — Aligné avec le design enluminé de la homepage
   Palette : navy #1a1a4a · or #c9a55a · ivoire #fdfdf6
   ============================================================ */

.navbar[b-0ppzy71jr8] {
    --navy: #1a1a4a;
    --navy-deep: #0e0e2e;
    --gold: #c9a55a;
    --gold-soft: #e3c98a;
    --gold-deep: #8a6f2a;
    --ivory: #fdfdf6;

    /* Couleur de fond sous le dégradé : en contraste élevé, le dégradé est retiré et la couleur
       devient Canvas, opaque ; sans elle, la barre deviendrait transparente au-dessus du texte. */
    background: var(--navy-deep) linear-gradient(180deg, var(--navy) 0%, var(--navy-deep) 100%);
    border: none;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
    position: fixed;
    padding: 0;
}

/* Filet d'or en bas du header (ornement enluminé) */
.navbar[b-0ppzy71jr8]::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(201, 165, 90, 0.35) 18%,
        rgba(201, 165, 90, 0.9) 50%,
        rgba(201, 165, 90, 0.35) 82%,
        transparent 100%
    );
    pointer-events: none;
}

.container-fluid[b-0ppzy71jr8] {
    overflow: visible;
    padding: 14px 18px;
    min-height: 80px;
    display: flex;
    align-items: center;
}

/* ====== Toggler hamburger ====== */
.navbar-toggler[b-0ppzy71jr8] {
    margin-left: 18px;
    padding: 6px 10px;
    background: transparent;
    border: 1px solid rgba(201, 165, 90, 0.45);
    border-radius: 0;
    transition: border-color 0.3s, background 0.3s, box-shadow 0.3s;
}
.navbar-toggler:hover[b-0ppzy71jr8] {
    border-color: var(--gold);
    background: rgba(201, 165, 90, 0.08);
}
.navbar-toggler:focus[b-0ppzy71jr8] {
    box-shadow: none;
    outline: none;
}
/* Focus au clavier : contour d'or clair (≈ 10:1 sur le marine), que le contraste élevé conserve. */
.navbar-toggler:focus-visible[b-0ppzy71jr8] {
    outline: 2px solid var(--gold-soft);
    outline-offset: 3px;
}
.navbar-toggler-icon[b-0ppzy71jr8] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='%23c9a55a' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

/* ====== Brand (logo + nom du site) ====== */
.navbar-brand[b-0ppzy71jr8] {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    color: var(--ivory);
    text-decoration: none;
    font-family: 'Playfair Display', 'Cormorant Garamond', serif;
    font-style: italic;
    font-weight: 400;
    font-size: 22px;
    letter-spacing: 0.015em;
    line-height: 1.1;
    white-space: nowrap;
    transition: color 0.3s;
}
.navbar-brand:hover[b-0ppzy71jr8],
.navbar-brand:focus[b-0ppzy71jr8] {
    color: var(--gold-soft);
    text-decoration: none;
}

.logo[b-0ppzy71jr8] {
    width: 36px;
    margin: 0;
    flex-shrink: 0;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
}

/* ====== Offcanvas (menu latéral) ====== */
.offcanvas[b-0ppzy71jr8] {
    background: linear-gradient(180deg, var(--navy) 0%, var(--navy-deep) 100%);
    border-right: 1px solid rgba(201, 165, 90, 0.35);
    color: var(--ivory);
    box-shadow: 4px 0 30px rgba(0, 0, 0, 0.4);
}

.offcanvas-header[b-0ppzy71jr8],
.offcanvas-body[b-0ppzy71jr8] {
    background: transparent;
}
.offcanvas-header[b-0ppzy71jr8] {
    gap: 0.75rem;   /* le contour de focus de « Fermer » ne touche pas le titre */
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid rgba(201, 165, 90, 0.28);
    position: relative;
}
/* Petit losange doré sous le titre, en écho aux sections */
.offcanvas-header[b-0ppzy71jr8]::after {
    content: "";
    position: absolute;
    left: 1.5rem;
    bottom: -4px;
    width: 6px;
    height: 6px;
    background: var(--gold);
    transform: rotate(45deg);
}

.offcanvas-title[b-0ppzy71jr8] {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-weight: 400;
    color: var(--gold-soft);
    font-size: 1.15rem;
    letter-spacing: 0.02em;
    margin: 0;
}

/* Croix d'or clair dessinée directement (et non par un filtre, qui teinterait aussi le contour de focus). */
.btn-close[b-0ppzy71jr8] {
    --bs-btn-close-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23e3c98a'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414'/%3e%3c/svg%3e");
    filter: none;
    border-radius: 0;
    opacity: 0.85;
}
.btn-close:hover[b-0ppzy71jr8],
.btn-close:focus[b-0ppzy71jr8] {
    opacity: 1;
    box-shadow: none;
}
.btn-close:focus-visible[b-0ppzy71jr8] {
    outline: 2px solid var(--gold-soft);
    outline-offset: 2px;
}

.offcanvas-body[b-0ppzy71jr8] {
    padding: 1.5rem 1.5rem 1.75rem;
    display: flex;
    flex-direction: column;
}

/* ====== Liens du menu ====== */
.navbar-nav[b-0ppzy71jr8] {
    gap: 0.1rem;
}

.nav-item[b-0ppzy71jr8] {
    width: 100%;
}

.nav-link[b-0ppzy71jr8] {
    font-family: 'Playfair Display', 'Cormorant Garamond', serif;
    font-weight: 400;
    font-size: 1.05rem;
    color: rgba(246, 246, 246, 0.88);
    padding: 0.7rem 0 !important;
    position: relative;
    border-bottom: 1px solid rgba(201, 165, 90, 0.1);
    transition: color 0.3s ease, padding-left 0.35s cubic-bezier(.2,.7,.2,1);
}
.nav-link[b-0ppzy71jr8]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 10px;
    height: 1px;
    background: var(--gold);
    transform: translateY(-50%) scaleX(0);
    transform-origin: left center;
    transition: transform 0.35s cubic-bezier(.2,.7,.2,1);
}
.nav-link:hover[b-0ppzy71jr8],
.nav-link:focus[b-0ppzy71jr8] {
    color: var(--gold-soft);
    padding-left: 18px !important;
    text-decoration: none;
}
.nav-link:hover[b-0ppzy71jr8]::before,
.nav-link:focus[b-0ppzy71jr8]::before {
    transform: translateY(-50%) scaleX(1);
}
/* Au clavier, le contour d'or clair remplace l'anneau bleu de Bootstrap (peu visible sur le marine). */
.nav-link:focus-visible[b-0ppzy71jr8] {
    box-shadow: none;
    outline: 2px solid var(--gold-soft);
    outline-offset: 2px;
}

/* ====== Bouton admin "Créer article" ====== */
.btn.btn-primary[b-0ppzy71jr8] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1.5rem;
    padding: 0.75rem 1.4rem;
    font-family: 'Lato', sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    background: var(--gold);
    border: 1px solid var(--gold);
    color: var(--navy);
    border-radius: 0;
    box-shadow: none;
    transition: background 0.3s, color 0.3s, transform 0.3s;
}
.btn.btn-primary:hover[b-0ppzy71jr8],
.btn.btn-primary:focus[b-0ppzy71jr8] {
    background: var(--ivory);
    border-color: var(--gold);
    color: var(--navy);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px -6px rgba(0, 0, 0, 0.4);
}

/* ====== Responsive ====== */
@media (max-width: 850px) {
    .navbar-brand[b-0ppzy71jr8] { font-size: 19px; }
    .logo[b-0ppzy71jr8] { width: 32px; }
}
@media (max-width: 700px) {
    .navbar-brand[b-0ppzy71jr8] { font-size: 17px; gap: 0.55rem; }
}
@media (max-width: 620px) {
    .navbar-brand[b-0ppzy71jr8] { font-size: 15px; }
    .navbar-toggler[b-0ppzy71jr8] { margin-left: 6px; }
}
@media (max-width: 500px) {
    .navbar-brand[b-0ppzy71jr8] { font-size: 16px; }
    .navbar-toggler[b-0ppzy71jr8] {
        margin-left: 0 !important;
        padding: 4px 8px;
    }
    .logo[b-0ppzy71jr8] { width: 28px; margin-left: 5px; }
    .container-fluid[b-0ppzy71jr8] { padding: 8px 10px; }
    .navbar .navbar-brand.translate-middle-x[b-0ppzy71jr8] { transform: none !important; }
    .navbar .navbar-brand.start-50[b-0ppzy71jr8] {
        left: 60px !important;
        transform: none !important;
    }
}
@media (max-width: 445px) {
    .navbar-brand[b-0ppzy71jr8] { font-size: 15px; gap: 0.4rem; }
}
@media (max-width: 365px) {
    .navbar-brand[b-0ppzy71jr8] { font-size: 14px; }
}
@media (max-width: 320px) {
    .navbar-brand[b-0ppzy71jr8] { font-size: 13px; }
}

/* ====== Contraste élevé (forced-colors) ======
   Les dégradés et les ombres disparaissent : un filet sépare la barre du texte qui défile dessous.
   Les icônes dorées (menu, fermer) sont des images de fond que le navigateur ne recolore pas, presque
   invisibles sur un thème clair : on les découpe (mask) dans la couleur du texte des boutons. */
@media (forced-colors: active) {
    .navbar[b-0ppzy71jr8] {
        border-bottom: 1px solid CanvasText;
    }
    .navbar-toggler-icon[b-0ppzy71jr8] {
        forced-color-adjust: none;
        background: ButtonText;
        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='%23000' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E") center / 100% no-repeat;
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='%23000' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E") center / 100% no-repeat;
    }
    /* La croix est dessinée par un pseudo-élément : un mask sur le bouton couperait aussi son contour de focus. */
    .btn-close[b-0ppzy71jr8] {
        filter: none;
        background-image: none;
    }
    .btn-close[b-0ppzy71jr8]::before {
        content: "";
        display: block;
        width: 1em;
        height: 1em;
        forced-color-adjust: none;
        background: ButtonText;
        -webkit-mask: var(--bs-btn-close-bg) center / 1em auto no-repeat;
        mask: var(--bs-btn-close-bg) center / 1em auto no-repeat;
    }
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
#blazor-error-ui[b-j1gs5vwydj] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-j1gs5vwydj] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Pages/Bible.razor.rz.scp.css */
/* ============================================================
   LA BIBLE — table des livres et lecture d'un livre
   Même grammaire que l'accueil : vélin, rubriques rouges, petites
   lettrines d'or sur la couleur du jour (--lettrine-fond), filets d'or.
   Règle : aucun texte en or sur fond clair ; le texte coloré est en
   --rubrique, le reste en --navy / --ink / --ink-soft.
   ============================================================ */

/* ---------- Liens et focus ---------- */
.bible-parties a[b-90sc8joxyy],
.bible-livre[b-90sc8joxyy],
.bible-fil a[b-90sc8joxyy],
.bible-sommaire-liste a[b-90sc8joxyy],
.bible-voisin[b-90sc8joxyy],
.bible-chap-jump-retour[b-90sc8joxyy] {
    color: var(--navy);
    text-decoration: none;
}
.bible-parties a:focus-visible[b-90sc8joxyy],
.bible-livre:focus-visible[b-90sc8joxyy],
.bible-fil a:focus-visible[b-90sc8joxyy],
.bible-sommaire summary:focus-visible[b-90sc8joxyy],
.bible-sommaire-liste a:focus-visible[b-90sc8joxyy],
.bible-voisin:focus-visible[b-90sc8joxyy],
.bible-source a:focus-visible[b-90sc8joxyy],
.bible-chap-jump-retour:focus-visible[b-90sc8joxyy],
.bible-chap-jump-toggle:focus-visible[b-90sc8joxyy],
.bible-chap-jump-lien:focus-visible[b-90sc8joxyy] {
    outline: 2px solid var(--navy);
    outline-offset: 3px;
    border-radius: 2px;
}
/* Un élément atteint au clavier (ou rendu au focus après un retour) ne passe pas sous la barre fixe. */
.bible-parties a[b-90sc8joxyy],
.bible-livre[b-90sc8joxyy],
.bible-sommaire summary[b-90sc8joxyy],
.bible-sommaire-liste a[b-90sc8joxyy],
.bible-voisin[b-90sc8joxyy] {
    scroll-margin-block: 96px 24px;
}
/* Titres qui reçoivent le focus après une navigation (tabindex=-1) : pas de contour, la lecture
   reprend simplement à cet endroit. */
.bible-h2:focus[b-90sc8joxyy],
.bible-chapitre-num:focus[b-90sc8joxyy] {
    outline: none;
}

/* Sigle inconnu (/bible/Xyz) : un avis en rubrique sous le titre */
.bible-avis[b-90sc8joxyy] {
    max-width: 62ch;
    margin: -0.6rem 0 2.2rem;
    padding: 2px 0 2px 18px;
    border-left: 1px solid var(--rubrique);
    font-family: 'Lora', serif;
    font-size: 1.02rem;
    line-height: 1.6;
    color: var(--ink);
}
.bible-avis-titre[b-90sc8joxyy] {
    display: block;
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--rubrique);
}

/* Ordinaux des noms de livres : 1er, 2e en exposant */
.bible-ordinal[b-90sc8joxyy] {
    top: -0.5em;
    margin-left: 0.03em;
    font-size: 0.62em;
    line-height: 0;
    letter-spacing: 0.02em;
}
/* Titre à ordinal (h1.sans-lettrine) : même lettrine que .page-content h1::first-letter,
   qui porte le nombre entier (1er). */
.bible-lettrine[b-90sc8joxyy] {
    float: left;
    margin: -0.17em 0.18em 0 0;
    padding: 0.14em 0.2em 0.1em;
    font-family: 'Playfair Display', serif;
    font-style: normal;
    font-weight: 700;
    font-size: 1.12em;
    line-height: 1;
    color: var(--gold);
    background: var(--lettrine-fond);
    border: 3px double var(--gold);
}
.bible-lettrine .bible-ordinal[b-90sc8joxyy] {
    top: -0.72em;
    margin-left: 0.04em;
    font-size: 0.46em;
}
/* Titre qui passe à la ligne (data-lettrine, js/lettrine-titre.js) : lettrine tombante sur deux
   lignes, comme .page-content h1[data-lettrine="tombante"]::first-letter (app.css). */
h1[data-lettrine="tombante"] .bible-lettrine[b-90sc8joxyy] {
    margin: 0.12em 0.16em 0 0;
    padding: 0 0.16em 0.17em;
    font-size: 1.6em;
}

/* ============================================================
   TABLE DES LIVRES (/bible)
   ============================================================ */

.bible-tete-grille[b-90sc8joxyy] {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    gap: 40px 64px;
    align-items: start;
}
.bible-intro[b-90sc8joxyy] {
    max-width: 62ch;
    font-family: 'Lora', serif;
    font-size: 1.08rem;
    line-height: 1.7;
    color: var(--ink);
}
.bible-intro p[b-90sc8joxyy] {
    margin: 0 0 1rem;
}

/* Les deux parties : même sommaire de saut que les époques des conciles (.epoques-nav) — des
   colonnes entre un filet d'or et un filet pâle, le nombre de livres en rubrique sous le nom. */
.bible-parties[b-90sc8joxyy] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 2rem;
    border-top: 1px solid var(--gold);
    border-bottom: 1px solid var(--filet);
}
.bible-parties a[b-90sc8joxyy] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    min-height: 44px;
    padding: 14px 16px;
}
.bible-parties a:first-child[b-90sc8joxyy] { padding-left: 0; }
.bible-parties a + a[b-90sc8joxyy] { border-left: 1px solid var(--filet); }
.bible-partie-nom[b-90sc8joxyy] {
    font-family: 'Playfair Display', serif;
    font-size: 1.15rem;
    line-height: 1.25;
    text-decoration: underline 1px transparent;
    text-underline-offset: 4px;
    transition: text-decoration-color 0.2s;
}
.bible-parties a:hover .bible-partie-nom[b-90sc8joxyy],
.bible-parties a:focus-visible .bible-partie-nom[b-90sc8joxyy] {
    text-decoration-color: var(--gold);
}
.bible-partie-compte[b-90sc8joxyy] {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: 0.92rem;
    color: var(--rubrique);
}

/* Glose : une citation dans la marge, filet d'or à gauche */
.bible-glose[b-90sc8joxyy] {
    margin: 0;
    padding: 4px 0 4px 28px;
    border-left: 1px solid var(--gold);
}
.bible-glose blockquote[b-90sc8joxyy] {
    margin: 0;
}
.bible-glose blockquote p[b-90sc8joxyy] {
    margin: 0 0 12px;
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: 1.4rem;
    line-height: 1.4;
    color: var(--navy);
    text-wrap: balance;
}
.bible-glose figcaption[b-90sc8joxyy] {
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    font-size: 0.7rem;
    line-height: 1.6;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--rubrique);
}

/* --- Ancien / Nouveau Testament --- */
.bible-testament[b-90sc8joxyy] {
    margin-top: 64px;
    padding-top: 64px;
    border-top: 1px solid var(--filet);
    scroll-margin-top: 88px;   /* sous la barre fixe (80 px) */
}
.bible-testament-tete[b-90sc8joxyy] {
    margin-bottom: 36px;
}

/* Titre de partie (h2.bible-h2.lettrine-h2) : petite lettrine, règle commune d'app.css. */
.bible-chapeau[b-90sc8joxyy] {
    margin: 1.1rem 0 0;
    max-width: 58ch;
    font-family: 'Lora', serif;
    font-size: 1.08rem;
    line-height: 1.6;
    color: var(--ink-soft);
}

/* --- Un genre littéraire : le titre dans la marge, les livres à droite --- */
.bible-groupe[b-90sc8joxyy] {
    display: grid;
    grid-template-columns: 13rem minmax(0, 1fr);
    gap: 12px 40px;
    padding: 26px 0;
    border-top: 1px solid var(--filet);
}
.bible-groupe-titre[b-90sc8joxyy] {
    margin: 0;
    padding: 10px 0 0;
    font-family: 'Playfair Display', serif;
    font-weight: 400;
    font-size: 1.35rem;
    line-height: 1.25;
    color: var(--navy);
}
.bible-groupe-compte[b-90sc8joxyy] {
    display: block;
    margin-top: 4px;
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: 0.95rem;
    color: var(--rubrique);
}

.bible-livres[b-90sc8joxyy] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: 6px 28px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.bible-livre[b-90sc8joxyy] {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    align-items: center;
    gap: 14px;
    min-height: 64px;
    padding: 6px 0;
}

/* Le sigle du livre : une rubrique dans un filet d'or, comme la table des abréviations d'un missel.
   Au survol, il devient petite lettrine (or sur la couleur du jour, double filet d'or) ; les lettrines
   pleines restent réservées aux titres. Corps ≥ 18,7 px en gras (grand texte : or sur la couleur du jour ≥ 3:1). */
.bible-blason[b-90sc8joxyy] {
    display: grid;
    place-items: center;
    box-sizing: border-box;
    width: 52px;
    height: 52px;
    padding-top: 0.06em;
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 1.3rem;
    line-height: 1;
    letter-spacing: -0.01em;
    font-variant-numeric: lining-nums;
    color: var(--rubrique);
    background: transparent;
    border: 1px solid var(--gold);
    transition: background-color 0.2s, color 0.2s;
}
.bible-blason-long[b-90sc8joxyy] {
    font-size: 1.17rem;
    letter-spacing: -0.05em;
}
.bible-livre:hover .bible-blason[b-90sc8joxyy],
.bible-livre:focus-visible .bible-blason[b-90sc8joxyy] {
    color: var(--gold);
    background: var(--lettrine-fond);
    border: 3px double var(--gold);
}
.bible-livre-corps[b-90sc8joxyy] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.bible-livre-nom[b-90sc8joxyy] {
    font-family: 'Playfair Display', serif;
    font-size: 1.08rem;
    line-height: 1.25;
    color: var(--navy);
    text-decoration: underline 1px transparent;
    text-underline-offset: 4px;
    transition: text-decoration-color 0.2s;
}
.bible-livre:hover .bible-livre-nom[b-90sc8joxyy],
.bible-livre:focus-visible .bible-livre-nom[b-90sc8joxyy] {
    text-decoration-color: var(--gold);
}
.bible-livre-compte[b-90sc8joxyy] {
    font-family: 'Lora', serif;
    font-style: italic;
    font-size: 0.86rem;
    line-height: 1.4;
    color: var(--ink-soft);
}

/* ============================================================
   LECTURE D'UN LIVRE (/bible/{Code})
   Une colonne de lecture, comme la page d'un livre.
   ============================================================ */

.bible-lecture[b-90sc8joxyy] {
    max-width: 46rem;
    margin-inline: auto;
}

/* --- Fil d'Ariane ---
   Même dessin que celui du Compendium et des conciles. Le lien s'agrandit au doigt de 6 px en haut
   et en bas (padding et marge négative, sans rien déplacer) ; l'écart entre deux lignes vaut ces
   2 × 6 px, pour que la zone du lien n'empiète jamais sur le texte de la ligne voisine. */
.bible-fil[b-90sc8joxyy] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 12px 10px;
    margin: 0 0 18px;
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    font-size: 0.7rem;
    line-height: 1.6;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-soft);
}
.bible-fil a[b-90sc8joxyy] {
    display: inline-block;
    padding-block: 6px;
    margin-block: -6px;
    text-decoration: underline 1px var(--gold);
    text-underline-offset: 4px;
}
.bible-fil a:hover[b-90sc8joxyy] {
    text-decoration-color: var(--rubrique);
}
.bible-fil-sep[b-90sc8joxyy] {
    color: var(--rubrique);
}

.bible-livre-sous[b-90sc8joxyy] {
    margin: -0.75rem 0 2rem;
    font-family: 'Lora', serif;
    font-style: italic;
    font-size: 0.95rem;
    color: var(--ink-soft);
}

/* --- Table des chapitres --- */
.bible-sommaire[b-90sc8joxyy] {
    margin: -0.9rem 0 1.5rem;
}
.bible-sommaire summary[b-90sc8joxyy] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 14px;
    min-height: 44px;
    padding: 10px 0;
    cursor: pointer;
    list-style: none;
}
.bible-sommaire summary[b-90sc8joxyy]::-webkit-details-marker {
    display: none;
}
/* Petit chevron rouge, tourné vers le bas quand la table est ouverte */
.bible-sommaire summary[b-90sc8joxyy]::before {
    content: "";
    align-self: center;
    width: 7px;
    height: 7px;
    margin: 0 2px 0 3px;
    border-right: 1.5px solid var(--rubrique);
    border-bottom: 1.5px solid var(--rubrique);
    transform: rotate(-45deg);
    transition: transform 0.2s;
}
.bible-sommaire details[open] summary[b-90sc8joxyy]::before {
    transform: rotate(45deg) translate(-2px, -2px);
}
.bible-sommaire-titre[b-90sc8joxyy] {
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--navy);
}
.bible-sommaire-aide[b-90sc8joxyy] {
    font-family: 'Lora', serif;
    font-style: italic;
    font-size: 0.9rem;
    color: var(--ink-soft);
}
.bible-sommaire details[open] .bible-sommaire-aide[b-90sc8joxyy] {
    display: none;
}
.bible-sommaire-liste[b-90sc8joxyy] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(2.75rem, 1fr));
    gap: 6px;
    margin: 6px 0 0;
    padding: 0;
    list-style: none;
}
.bible-sommaire-liste a[b-90sc8joxyy] {
    display: grid;
    place-items: center;
    min-height: 2.75rem;
    font-family: 'Playfair Display', serif;
    font-size: 1.02rem;
    font-variant-numeric: lining-nums;
    border: 1px solid var(--filet);
    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
/* Au survol, la case prend la couleur du jour ; le chiffre est en ivoire (≥ 4,5:1 sur toutes les
   couleurs liturgiques, ce que l'or n'atteint pas sur le vert ou le rose à ce corps). */
.bible-sommaire-liste a:hover[b-90sc8joxyy] {
    color: var(--ivory);
    background: var(--lettrine-fond);
    border-color: var(--gold);
}

/* --- Le texte --- */
.bible-chapitre[b-90sc8joxyy] {
    padding-top: 1.1rem;            /* un peu d'air sous la barre fixe lors d'un saut de chapitre */
    scroll-margin-top: 80px;        /* ancre #ch-12 servie par le navigateur */
}
.bible-chapitre + .bible-chapitre[b-90sc8joxyy] {
    margin-top: 1.4rem;
}

.bible-versets[b-90sc8joxyy] {
    display: flow-root;             /* la lettrine du chapitre ne déborde pas sur le suivant */
    font-family: 'Lora', serif;
    font-size: 1.15rem;
    line-height: 1.85;
    color: var(--ink);
    text-align: justify;
    text-wrap: pretty;              /* moins de lignes lâches et de veuves dans la justification */
    -webkit-hyphens: auto;
    hyphens: auto;
}

/* Numéro du chapitre : petite lettrine d'or sur la couleur du jour, sur deux lignes */
.bible-chapitre-num[b-90sc8joxyy] {
    float: left;
    margin: 0.5rem 0.8rem 0 0;
    padding: 0;
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 1.85rem;
    line-height: 1;
}
.bible-chapitre-chiffre[b-90sc8joxyy] {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: 3.2rem;
    height: 3.2rem;                 /* du haut des capitales de la 1re ligne à la ligne de base de la 2e */
    padding: 0.1em 0.3em 0;
    font-variant-numeric: lining-nums;
    color: var(--gold);
    background: var(--lettrine-fond);
    border: 3px double var(--gold);
}

/* Numéros de versets : discrets, en rubrique */
.bible-verset-num[b-90sc8joxyy] {
    margin: 0 0.32em 0 0.12em;
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    font-size: 0.6em;
    line-height: 0;
    letter-spacing: 0.02em;
    vertical-align: 0.62em;
    font-variant-numeric: lining-nums;
    color: var(--rubrique);
    user-select: none;
    /* Le numéro est aussi l'ancre du verset (#ch-3-v-16, lien « Lire davantage »). Le retrait haut,
       sans effet sur la ligne (boîte en ligne), remonte sa boîte d'une ligne : le verset visé arrive
       sous la barre fixe avec un peu d'air (bibleScrollToId cale la boîte à 80 px). */
    padding-top: 2.2rem;
    scroll-margin-top: 80px;
    pointer-events: none;           /* ce retrait ne doit pas capter les clics sur la ligne du dessus */
}
/* Dans la prose, le premier verset suit la lettrine : son numéro reste dans le texte (ancre,
   lecteurs d'écran) mais ne s'affiche pas. */
.bible-versets:not(.bible-poesie) > .bible-chapitre-num + .bible-verset > .bible-verset-num[b-90sc8joxyy] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -2.2rem 0 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Premiers mots d'un livre, en capitales dans la traduction : petites capitales espacées */
.bible-incipit[b-90sc8joxyy] {
    font-size: 0.84em;
    letter-spacing: 0.07em;
}

/* Locuteurs du Cantique des cantiques (« ELLE », « LUI », « CHŒUR ») : une rubrique à la ligne,
   qui ouvre la réplique comme dans un missel. */
.bible-locuteur[b-90sc8joxyy] {
    display: block;
    margin: 0.7em 0 0.05em;
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    font-size: 0.68rem;
    line-height: 1.6;
    letter-spacing: 0.16em;
    text-indent: 0;
    color: var(--rubrique);
}

/* Signes de psalmodie (flexe †, médiante *) : rubriques rouges */
.bible-psalmodie[b-90sc8joxyy] {
    font-weight: 700;
    color: var(--rubrique);
}

/* Verset(s) ciblé(s) par un lien « Lire davantage » (?v=) */
.bible-verset-cible > .bible-verset-texte[b-90sc8joxyy] {
    padding: 0.06em 0.14em;
    margin: 0 -0.14em;
    background: rgba(201, 165, 90, 0.26);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

/* --- Psautier : un verset par paragraphe, un stique par ligne --- */
.bible-poesie[b-90sc8joxyy] {
    line-height: 1.6;
    text-align: left;
}
/* Le numéro du psaume en tête, prolongé d'un filet d'or */
.bible-poesie .bible-chapitre-num[b-90sc8joxyy] {
    float: none;
    display: flex;
    align-items: center;
    margin: 0 0 0.7rem;
    font-size: 1.6rem;
}
.bible-poesie .bible-chapitre-num[b-90sc8joxyy]::after {
    content: "";
    flex: 1;
    height: 1px;
    margin-left: 14px;
    background: var(--filet);
}
.bible-poesie .bible-chapitre-chiffre[b-90sc8joxyy] {
    min-width: 2.9rem;
    height: 2.9rem;
}
/* Numérotation hébraïque, entre parenthèses : Psaume 22 (23) */
.bible-psaume-hebreu[b-90sc8joxyy] {
    margin-left: 0.55rem;
    font-family: 'Lora', serif;
    font-style: italic;
    font-weight: 400;
    font-size: 1.12rem;
    color: var(--ink-soft);
    white-space: nowrap;
}
.bible-poesie .bible-verset[b-90sc8joxyy] {
    display: grid;
    grid-template-columns: 2.1rem minmax(0, 1fr);
    align-items: baseline;
    margin-bottom: 0.8rem;
}
.bible-poesie .bible-verset-num[b-90sc8joxyy] {
    grid-column: 1;
    margin: -2.2rem 0 0;            /* ici bloc de grille : le retrait d'ancre est compensé */
    padding-right: 0.8em;
    font-size: 0.66rem;
    line-height: inherit;
    vertical-align: baseline;
    text-align: right;
}
.bible-poesie .bible-verset-texte[b-90sc8joxyy] {
    grid-column: 2;
}
/* Chaque stique à la ligne ; s'il est trop long, la suite est en retrait */
.bible-stique[b-90sc8joxyy] {
    display: block;
    padding-left: 1.5em;
    text-indent: -1.5em;
}
.bible-poesie .bible-verset-cible > .bible-verset-texte[b-90sc8joxyy] {
    margin: 0 -0.3em;
    padding: 0.1em 0.3em;
}

/* --- Livres voisins : fin du livre, un losange d'or sur le filet --- */
.bible-voisins[b-90sc8joxyy] {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    grid-template-areas: "prec table suiv";
    align-items: start;
    gap: 20px 32px;
    margin-top: 72px;
    padding-top: 30px;
    border-top: 1px solid var(--filet);
}
.bible-voisins[b-90sc8joxyy]::before {
    content: "";
    position: absolute;
    top: -5px;
    left: 50%;
    width: 9px;
    height: 9px;
    background: var(--gold);
    box-shadow: 0 0 0 5px var(--velin);
    transform: translateX(-50%) rotate(45deg);
}
.bible-voisin[b-90sc8joxyy] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 44px;
}
.bible-voisin-prec[b-90sc8joxyy] { grid-area: prec; }
.bible-voisin-table[b-90sc8joxyy] { grid-area: table; align-items: center; text-align: center; }
.bible-voisin-suiv[b-90sc8joxyy] { grid-area: suiv; align-items: flex-end; text-align: right; }
.bible-voisin-sens[b-90sc8joxyy] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-soft);
}
.bible-voisin svg[b-90sc8joxyy],
.bible-chap-jump-retour svg[b-90sc8joxyy] {
    width: 20px;
    height: 10px;
    flex-shrink: 0;
    fill: none;
    stroke: var(--gold-deep);
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 0.3s;
}
.bible-voisin-prec:hover svg[b-90sc8joxyy],
.bible-chap-jump-retour:hover svg[b-90sc8joxyy] { transform: translateX(-4px); }
.bible-voisin-suiv:hover svg[b-90sc8joxyy] { transform: translateX(4px); }
.bible-voisin-nom[b-90sc8joxyy] {
    font-family: 'Playfair Display', serif;
    font-size: 1.2rem;
    line-height: 1.3;
    color: var(--navy);
    text-decoration: underline 1px transparent;
    text-underline-offset: 4px;
    transition: text-decoration-color 0.2s;
}
.bible-voisin:hover .bible-voisin-nom[b-90sc8joxyy],
.bible-voisin:focus-visible .bible-voisin-nom[b-90sc8joxyy] {
    text-decoration-color: var(--gold);
}

/* --- Source --- */
.bible-source[b-90sc8joxyy] {
    margin: 48px 0 0;
    font-family: 'Lora', serif;
    font-style: italic;
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--ink-soft);
}
.bible-testament + .bible-source[b-90sc8joxyy] {
    padding-top: 24px;
    border-top: 1px solid var(--filet);
}
.bible-lecture .bible-source[b-90sc8joxyy] {
    margin-top: 32px;
    text-align: center;
}
.bible-source a[b-90sc8joxyy] {
    color: var(--navy);
    text-decoration: underline 1px var(--gold);
    text-underline-offset: 3px;
    transition: text-decoration-color 0.2s;
}
.bible-source a:hover[b-90sc8joxyy] {
    text-decoration-color: var(--rubrique);
}

/* ============================================================
   NAVIGATEUR DE CHAPITRES FLOTTANT
   Un médaillon navy cerclé d'or ; le panneau (popover natif, en couche
   supérieure) s'ouvre au-dessus. Échap ou un clic au dehors le ferment.
   ============================================================ */
.bible-chap-jump[b-90sc8joxyy] {
    position: fixed;
    right: 20px;
    bottom: 24px;
    z-index: 950;
}

.bible-chap-jump-toggle[b-90sc8joxyy] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    padding: 0;
    font-size: 1.3rem;
    color: var(--ivory);
    background: var(--navy);
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    /* filet d'or intérieur, puis anneau de vélin et filet d'or : se détache du texte sans ombre */
    box-shadow: inset 0 0 0 3px var(--navy), inset 0 0 0 4px var(--gold),
                0 0 0 3px var(--velin), 0 0 0 4px var(--gold);
    transition: background-color 0.2s;
}
.bible-chap-jump-toggle:hover[b-90sc8joxyy] {
    background: #23235c;
    box-shadow: inset 0 0 0 3px #23235c, inset 0 0 0 4px var(--gold),
                0 0 0 3px var(--velin), 0 0 0 4px var(--gold);
}

/* La croix remplace la liste quand le panneau est ouvert. */
.bible-chap-jump-fermer[b-90sc8joxyy] {
    display: none;
}
.bible-chap-jump:has(.bible-chap-jump-panel:popover-open) .bible-chap-jump-ouvrir[b-90sc8joxyy] {
    display: none;
}
.bible-chap-jump:has(.bible-chap-jump-panel:popover-open) .bible-chap-jump-fermer[b-90sc8joxyy] {
    display: inline-block;
}

/* Fermé, le popover est masqué par le navigateur ; ouvert, il est calé au-dessus du médaillon
   (24 px de marge + 52 px de médaillon + 14 px d'écart). */
.bible-chap-jump-panel[b-90sc8joxyy] {
    position: fixed;
    inset: auto 20px 90px auto;
    box-sizing: border-box;
    width: min(320px, calc(100vw - 40px));
    max-height: min(62vh, 480px);
    margin: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 14px 16px 16px;
    color: var(--ink);
    background-color: var(--velin);
    background-image: var(--grain);
    border: 3px double var(--gold);
}

/* Navigateurs sans popover : le médaillon s'efface, la table des chapitres en tête de livre suffit. */
@supports not selector(:popover-open) {
    .bible-chap-jump[b-90sc8joxyy],
    .bible-chap-jump-panel[b-90sc8joxyy] {
        display: none;
    }
}

.bible-chap-jump-retour[b-90sc8joxyy] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.bible-chap-jump-retour:hover span[b-90sc8joxyy] {
    text-decoration: underline 1px var(--gold);
    text-underline-offset: 4px;
}

.bible-chap-jump-titre[b-90sc8joxyy] {
    margin: 2px 0 10px;
    padding-bottom: 8px;
    font-family: 'Playfair Display', serif;
    font-size: 1.1rem;
    line-height: 1.3;
    color: var(--navy);
    border-bottom: 1px solid var(--filet);
}

.bible-chap-jump-grille[b-90sc8joxyy] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
    gap: 5px;
}

.bible-chap-jump-lien[b-90sc8joxyy] {
    display: grid;
    place-items: center;
    min-height: 40px;
    padding: 0;
    font-family: 'Playfair Display', serif;
    font-size: 0.98rem;
    font-variant-numeric: lining-nums;
    color: var(--navy);
    background: transparent;
    border: 1px solid var(--filet);
    border-radius: 0;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.bible-chap-jump-lien:hover[b-90sc8joxyy] {
    color: var(--ivory);
    background: var(--lettrine-fond);
    border-color: var(--gold);
}

/* ============================================================
   TABLETTE
   ============================================================ */
@media (max-width: 899.98px) {
    .bible-tete-grille[b-90sc8joxyy] { grid-template-columns: minmax(0, 1fr); }
    .bible-glose[b-90sc8joxyy] {
        padding: 24px 0 0;
        border-left: none;
        border-top: 1px solid var(--gold);
    }
    .bible-groupe[b-90sc8joxyy] {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
    }
    .bible-groupe-titre[b-90sc8joxyy] {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 2px 12px;
        padding: 0;
    }
    .bible-groupe-compte[b-90sc8joxyy] {
        display: inline;
        margin: 0;
    }
    /* Colonne trop étroite pour une justification sans lézardes : fer à gauche, comme l'accueil. */
    .bible-versets[b-90sc8joxyy] { text-align: left; }
}

/* ============================================================
   MOBILE (< 768 px)
   ============================================================ */
@media (max-width: 767.98px) {
    .bible-intro[b-90sc8joxyy] { font-size: 1.02rem; }
    .bible-glose blockquote p[b-90sc8joxyy] { font-size: 1.2rem; }
    /* Une partie par ligne, le nombre de livres à droite (comme les époques des conciles). */
    .bible-parties[b-90sc8joxyy] { grid-template-columns: minmax(0, 1fr); margin-top: 1.5rem; }
    .bible-parties a[b-90sc8joxyy] {
        flex-direction: row;
        justify-content: space-between;
        align-items: baseline;
        gap: 12px;
        padding: 12px 0;
    }
    .bible-parties a + a[b-90sc8joxyy] {
        border-left: 0;
        border-top: 1px solid var(--filet);
    }

    .bible-testament[b-90sc8joxyy] { margin-top: 48px; padding-top: 48px; }
    .bible-testament-tete[b-90sc8joxyy] { margin-bottom: 24px; }
    .bible-chapeau[b-90sc8joxyy] { font-size: 1rem; }

    .bible-groupe[b-90sc8joxyy] { padding: 22px 0 18px; }
    .bible-groupe-titre[b-90sc8joxyy] { font-size: 1.22rem; }
    .bible-livres[b-90sc8joxyy] { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .bible-livre[b-90sc8joxyy] {
        grid-template-columns: 46px minmax(0, 1fr);
        min-height: 58px;
        padding: 5px 0;
    }
    .bible-blason[b-90sc8joxyy] { width: 46px; height: 46px; font-size: 1.2rem; }
    .bible-blason-long[b-90sc8joxyy] { font-size: 1.17rem; letter-spacing: -0.07em; }
    .bible-livre-nom[b-90sc8joxyy] { font-size: 1.04rem; }

    .bible-versets[b-90sc8joxyy] {
        font-size: 1.06rem;
        line-height: 1.78;
    }
    .bible-chapitre-num[b-90sc8joxyy] {
        margin: 0.55rem 0.65rem 0 0;
        font-size: 1.55rem;
    }
    .bible-chapitre-chiffre[b-90sc8joxyy] {
        min-width: 2.75rem;
        height: 2.75rem;
    }
    .bible-poesie .bible-chapitre-num[b-90sc8joxyy] { margin: 0 0 0.9rem; font-size: 1.4rem; }
    .bible-poesie .bible-chapitre-chiffre[b-90sc8joxyy] { min-width: 2.5rem; height: 2.5rem; }
    .bible-psaume-hebreu[b-90sc8joxyy] { font-size: 0.95rem; }
    .bible-sommaire-liste[b-90sc8joxyy] { grid-template-columns: repeat(auto-fill, minmax(2.5rem, 1fr)); }
    .bible-sommaire-liste a[b-90sc8joxyy] { min-height: 2.5rem; }
    .bible-poesie .bible-verset[b-90sc8joxyy] { grid-template-columns: 1.7rem minmax(0, 1fr); }
    .bible-stique[b-90sc8joxyy] { padding-left: 1.2em; text-indent: -1.2em; }

    .bible-voisins[b-90sc8joxyy] {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas: "prec suiv" "table table";
        gap: 28px 20px;
        margin-top: 56px;
    }
    .bible-voisin-nom[b-90sc8joxyy] { font-size: 1.05rem; }
    .bible-voisin-table[b-90sc8joxyy] { padding-top: 20px; border-top: 1px solid var(--filet); }

    .bible-chap-jump[b-90sc8joxyy] { right: 16px; bottom: 18px; }
    .bible-chap-jump-toggle[b-90sc8joxyy] { width: 48px; height: 48px; font-size: 1.15rem; }
    .bible-chap-jump-panel[b-90sc8joxyy] {
        inset: auto 16px 80px auto;     /* 18 px + médaillon 48 px + 14 px */
        width: min(320px, calc(100vw - 32px));
    }
}

@media (prefers-reduced-motion: reduce) {
    .bible-sommaire summary[b-90sc8joxyy]::before,
    .bible-voisin svg[b-90sc8joxyy],
    .bible-chap-jump-retour svg[b-90sc8joxyy],
    .bible-blason[b-90sc8joxyy],
    .bible-sommaire-liste a[b-90sc8joxyy],
    .bible-chap-jump-lien[b-90sc8joxyy] {
        transition: none;
    }
}

@media (forced-colors: active) {
    .bible-lettrine[b-90sc8joxyy],
    .bible-blason[b-90sc8joxyy],
    .bible-chapitre-chiffre[b-90sc8joxyy] {
        color: CanvasText;
    }
}
/* /Components/Pages/Chapelet.razor.rz.scp.css */
/* ============================================================
   CHAPELET — folio de livre d'heures
   Même grammaire que l'accueil : rubriques rouges, lettrines d'or sur la
   couleur liturgique du jour (--lettrine-fond), filets d'or entre les
   chapitres, cadres « double filet d'or ». Pas de cartes ni d'ombres.
   Règle : aucun texte en or sur le vélin ; le texte coloré est en --rubrique.
   ============================================================ */

.chapelet[b-36qavbcaeh] {
    /* Couleur propre à chaque série : grains décoratifs seulement, jamais du texte. */
    --joyeux: var(--gold);
    --lumineux: #5b8bc4;
    --douloureux: #9b3b3b;
    --glorieux: #6f54a3;
}

/* Liens et contrôles : navy, souligné d'or au survol ; focus visible. */
.chapelet button:focus-visible[b-36qavbcaeh],
.chapelet a:focus-visible[b-36qavbcaeh],
.chapelet input:focus-visible[b-36qavbcaeh] {
    outline: 2px solid var(--navy);
    outline-offset: 3px;
}

/* Les références bibliques (BibleReferenceLinker) gardent le style commun de bible-ref.css :
   une rubrique rouge soulignée en pointillé, comme dans la Bible et les articles. */

/* ============================================================
   EN-TÊTE
   ============================================================ */
.chapelet-tete h1[b-36qavbcaeh] { margin-bottom: 1.5rem; }
.chapelet-lede[b-36qavbcaeh] {
    max-width: 60ch;
    margin: 0 0 0.6rem;
    font-family: 'Lora', serif;
    font-size: 1.15rem;
    line-height: 1.65;
    color: var(--ink-soft);
}
/* « Commencer à prier » / « Reprendre à l'étape 43 » : mène droit au mode guidé. */
.lien-guide[b-36qavbcaeh] { margin: 0 0 1.9rem; }
.lien-guide a[b-36qavbcaeh],
.comment-lien a[b-36qavbcaeh] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--navy);
    text-decoration: underline 1px transparent;
    text-underline-offset: 5px;
    transition: text-decoration-color 0.2s;
}
.lien-guide a:hover[b-36qavbcaeh],
.comment-lien a:hover[b-36qavbcaeh] { text-decoration-color: var(--gold); }
.lien-guide svg[b-36qavbcaeh],
.comment-lien svg[b-36qavbcaeh] {
    flex-shrink: 0;
    width: 20px;
    height: 10px;
    color: var(--gold-deep);
    transition: transform 0.3s;
}
.lien-guide a:hover svg[b-36qavbcaeh],
.comment-lien a:hover svg[b-36qavbcaeh] { transform: translateX(4px); }

/* ============================================================
   MYSTÈRES DU JOUR ET CHOIX DE LA SÉRIE
   ============================================================ */
.chapelet-jour[b-36qavbcaeh] {
    display: flex;
    align-items: baseline;
    gap: 0.55rem;
    margin: 0 0 0.9rem;
    font-family: 'Lora', serif;
    font-style: italic;
    font-size: 1.02rem;
    line-height: 1.5;
    color: var(--ink-soft);
}
.chapelet-jour strong[b-36qavbcaeh] {
    font-weight: 700;
    color: var(--ink);
}
.cj-glyph[b-36qavbcaeh] {
    flex-shrink: 0;
    align-self: flex-start;
    margin-top: 0.3em;
    width: 16px;
    height: 16px;
    color: var(--rubrique);
}
.cj-link[b-36qavbcaeh] { font-size: 1.08rem; }   /* le reste : avec .reprise-btn, plus bas */
.cj-link:hover[b-36qavbcaeh] { text-decoration-color: var(--rubrique); }

/* Les quatre séries : un bandeau entre deux filets ; la série choisie est
   encadrée d'un double filet d'or, comme les miniatures de l'accueil. */
.chapelet-series[b-36qavbcaeh] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding: 16px 0 12px;
    border-top: 1px solid var(--filet);
    border-bottom: 1px solid var(--filet);
}
.serie-btn[b-36qavbcaeh] {
    --accent: var(--gold);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;   /* les noms restent alignés si une ligne de jours se coupe */
    gap: 0.25rem;
    min-height: 44px;
    padding: 14px 10px 12px;
    text-align: center;
    color: var(--navy);
    background: transparent;
    border: 3px double transparent;
    border-radius: 0;
    cursor: pointer;
    transition: border-color 0.25s, background-color 0.25s;
}
.serie-joyeux[b-36qavbcaeh] { --accent: var(--joyeux); }
.serie-lumineux[b-36qavbcaeh] { --accent: var(--lumineux); }
.serie-douloureux[b-36qavbcaeh] { --accent: var(--douloureux); }
.serie-glorieux[b-36qavbcaeh] { --accent: var(--glorieux); }

/* Filet vertical entre deux séries (masqué autour de la série encadrée). */
.serie-btn + .serie-btn[b-36qavbcaeh]::before {
    content: "";
    position: absolute;
    left: -2px;
    top: 22%;
    bottom: 22%;
    width: 1px;
    background: var(--filet);
}
.serie-btn.actif[b-36qavbcaeh]::before,
.serie-btn.actif + .serie-btn[b-36qavbcaeh]::before { display: none; }

.serie-btn.actif[b-36qavbcaeh] {
    background: var(--ivory);
    border-color: var(--gold);
}
.serie-grain[b-36qavbcaeh] {
    display: inline-block;
    flex-shrink: 0;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 1px rgba(26, 26, 74, 0.25);
}
.serie-btn.actif .serie-grain[b-36qavbcaeh] {
    box-shadow: 0 0 0 2px var(--ivory), 0 0 0 3px var(--gold);
}
.serie-btn-nom[b-36qavbcaeh] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: 'Playfair Display', serif;
    font-size: 1.15rem;
    line-height: 1.2;
    color: var(--navy);
    text-decoration: underline 1px transparent;
    text-underline-offset: 5px;
    transition: text-decoration-color 0.2s;
}
.serie-btn:hover .serie-btn-nom[b-36qavbcaeh] { text-decoration-color: var(--gold); }
.serie-btn.actif .serie-btn-nom[b-36qavbcaeh] { text-decoration-color: transparent; }
.serie-btn-jours[b-36qavbcaeh] {
    font-family: 'Lato', sans-serif;
    font-size: 0.7rem;
    line-height: 1.45;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-wrap: balance;
    color: var(--ink-soft);
}
/* « Aujourd'hui » posé sur le bord haut, comme la légende d'un cadre. */
.serie-aujourdhui[b-36qavbcaeh] {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -58%);
    padding: 0 0.5em;
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: 0.9rem;
    line-height: 1.25;
    white-space: nowrap;
    color: var(--rubrique);
    background: var(--velin);
}

/* Après « Recommencer » ou un changement de série : de quoi revenir où l'on en était. */
.guide-reprise[b-36qavbcaeh] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 0.6rem;
    margin: 0;
    font-family: 'Lora', serif;
    font-style: italic;
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--ink-soft);
}
.chapelet-choix .guide-reprise[b-36qavbcaeh] { margin-top: 12px; }
.cj-link[b-36qavbcaeh],
.reprise-btn[b-36qavbcaeh] {
    padding: 0;
    background: none;
    border: none;
    font-family: 'Playfair Display', serif;
    font-style: italic;
    color: var(--navy);
    cursor: pointer;
    text-decoration: underline 1px var(--gold);
    text-underline-offset: 4px;
    transition: text-decoration-color 0.2s;
}
.reprise-btn[b-36qavbcaeh] {
    min-height: 44px;
    font-size: 1rem;
    text-align: left;
}
.reprise-btn:hover[b-36qavbcaeh] { text-decoration-color: var(--rubrique); }

/* ============================================================
   CHAPITRES : filet d'or, rubrique, titre à petite lettrine
   ============================================================ */
.chapitre[b-36qavbcaeh] {
    padding-block: 56px;
}
.chapitre + .chapitre[b-36qavbcaeh] {
    border-top: 1px solid var(--filet);
}
.chapitre-tete[b-36qavbcaeh] {
    margin-bottom: 32px;
}
/* Titres à petite lettrine (h2.lettrine-h2) : règle commune d'app.css, et marge de rubrique
   commune (0,6 rem). Les autres h2 (« Comment prier le chapelet ? ») : */
.chapitre h2:not(.lettrine-h2)[b-36qavbcaeh] {
    margin: 0;
    padding: 0;
    text-wrap: balance;
}
.chapitre h3[b-36qavbcaeh] { padding: 0; }
.chapeau[b-36qavbcaeh] {
    max-width: 58ch;
    margin: 0.9rem 0 0;
    font-family: 'Lora', serif;
    font-size: 1.06rem;
    line-height: 1.6;
    color: var(--ink-soft);
}

/* ============================================================
   MODE GUIDÉ
   ============================================================ */
.guide[b-36qavbcaeh] {
    padding-top: 48px;
    scroll-margin-top: 88px;
}
.guide-grid[b-36qavbcaeh] {
    display: grid;
    grid-template-columns: minmax(200px, 280px) minmax(0, 1fr);
    gap: 0 48px;
    align-items: start;
}

/* --- Le chapelet dessiné --- */
.guide-rosaire[b-36qavbcaeh] {
    position: sticky;
    top: 104px;
    display: flex;
    justify-content: center;
    padding-top: 6px;
}
.rosaire-svg[b-36qavbcaeh] {
    display: block;
    width: 100%;
    max-width: 260px;
    height: auto;
    overflow: visible;
}
.rosaire-chaine[b-36qavbcaeh] {
    fill: none;
    stroke: var(--gold-deep);
    stroke-width: 1;
    opacity: 0.5;
    vector-effect: non-scaling-stroke;
}
.bille[b-36qavbcaeh] { transition: fill 0.3s; }
.bille-ave[b-36qavbcaeh] { fill: #e2cd98; }
.bille-pater[b-36qavbcaeh] { fill: var(--gold); stroke: var(--gold-deep); stroke-width: 1; vector-effect: non-scaling-stroke; }
.bille-ave.fait[b-36qavbcaeh],
.bille-pater.fait[b-36qavbcaeh] { fill: var(--gold-deep); }
.bille-medaille[b-36qavbcaeh] { fill: var(--ivory); stroke: var(--gold-deep); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.bille-medaille.fait[b-36qavbcaeh] { fill: var(--gold); }
.medaille-coeur[b-36qavbcaeh] { fill: none; stroke: var(--gold-deep); stroke-width: 1; vector-effect: non-scaling-stroke; }

/* Grain en cours : la couleur du jour cerclée d'or, comme une lettrine. */
.bille.actif[b-36qavbcaeh] {
    fill: var(--lettrine-fond);
    stroke: var(--gold);
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
}
.bille-cercle[b-36qavbcaeh] {
    fill: var(--velin);
    stroke: var(--gold);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}
.crucifix path[b-36qavbcaeh] {
    fill: none;
    stroke-linecap: round;
}
.crucifix-bois[b-36qavbcaeh] { stroke: var(--gold-deep); stroke-width: 3.2; }
.crucifix.actif .crucifix-bois[b-36qavbcaeh] { stroke: var(--lettrine-fond); stroke-width: 3.4; }
.crucifix-or[b-36qavbcaeh] { stroke: var(--gold); stroke-width: 8; }

/* --- Panneau --- */
.guide-panneau[b-36qavbcaeh] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
    padding-left: 48px;
    border-left: 1px solid var(--filet);
}

.guide-progress[b-36qavbcaeh] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.gp-haut[b-36qavbcaeh] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px 16px;
}
.gp-compteur[b-36qavbcaeh] {
    font-family: 'Lato', sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--navy);
}
.gp-compteur span[b-36qavbcaeh] {
    font-weight: 400;
    color: var(--ink-soft);
}
.gp-dizaines[b-36qavbcaeh] {
    display: inline-flex;
    gap: 9px;
    padding: 3px;
}
.gp-dot[b-36qavbcaeh] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 1px solid var(--gold-deep);
    background: transparent;
    transition: background-color 0.3s;
}
.gp-dot.fait[b-36qavbcaeh] { background: var(--gold-deep); }
.gp-dot.encours[b-36qavbcaeh] {
    background: var(--lettrine-fond);
    border-color: var(--gold);
    box-shadow: 0 0 0 2px var(--velin), 0 0 0 3px var(--gold);
}
.gp-barre[b-36qavbcaeh] {
    height: 3px;
    background: rgba(26, 26, 74, 0.1);
    overflow: hidden;
}
.gp-barre span[b-36qavbcaeh] {
    display: block;
    height: 100%;
    background: var(--gold-deep);
    transition: width 0.35s ease;
}

/* --- Réglages : afficher les prières, recommencer --- */
.guide-actions[b-36qavbcaeh] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0 24px;
    margin-top: -6px;
}
.ga-toggle[b-36qavbcaeh],
.ga-reset[b-36qavbcaeh] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 44px;
    margin: 0;
    font-family: 'Lato', sans-serif;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
}
.ga-toggle[b-36qavbcaeh] { color: var(--navy); }
.ga-toggle input[b-36qavbcaeh] {
    width: 1.05rem;
    height: 1.05rem;
    margin: 0;
    accent-color: var(--navy);
    cursor: pointer;
}
.ga-reset[b-36qavbcaeh] {
    padding: 0;
    background: none;
    border: none;
    color: var(--ink-soft);
    transition: color 0.2s;
}
.ga-reset:hover[b-36qavbcaeh] { color: var(--rubrique); }

/* --- Contrôles --- */
.guide-controls[b-36qavbcaeh] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
    gap: 12px;
}
.gc-btn[b-36qavbcaeh] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 52px;
    padding: 0.8rem 1rem;
    font-family: 'Lato', sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    border-radius: 0;
    cursor: pointer;
    transition: background-color 0.25s, color 0.25s;
}
.gc-btn svg[b-36qavbcaeh] {
    flex-shrink: 0;
    width: 22px;
    height: 11px;
    transition: transform 0.3s;
}
.gc-retour[b-36qavbcaeh] { transform: rotate(180deg); }
.gc-prec[b-36qavbcaeh] {
    color: var(--navy);
    background: transparent;
    border: 1px solid var(--gold);
}
.gc-prec svg[b-36qavbcaeh] { color: var(--gold-deep); }
.gc-prec:hover:not(:disabled)[b-36qavbcaeh] { background: rgba(201, 165, 90, 0.14); }
.gc-prec:hover:not(:disabled) svg[b-36qavbcaeh] { transform: rotate(180deg) translateX(4px); }
.gc-suiv[b-36qavbcaeh] {
    color: var(--ivory);
    background: var(--navy);
    border: 1px solid var(--navy);
    box-shadow: inset 0 0 0 3px var(--navy), inset 0 0 0 4px var(--gold);
}
.gc-suiv svg[b-36qavbcaeh] { color: var(--gold); }
.gc-suiv:hover:not(:disabled)[b-36qavbcaeh] {
    background: #23235c;
    box-shadow: inset 0 0 0 3px #23235c, inset 0 0 0 4px var(--gold);
}
.gc-suiv:hover:not(:disabled) svg[b-36qavbcaeh] { transform: translateX(4px); }
.gc-suiv .bi[b-36qavbcaeh] {
    font-size: 1rem;
    line-height: 1;
    color: var(--gold);
}
/* « Précédent » à la première étape : éteint par les jetons du folio, sans voile d'opacité. */
.gc-btn:disabled[b-36qavbcaeh] {
    color: var(--ink-soft);
    background: transparent;
    border-color: var(--filet);
    box-shadow: none;
    cursor: not-allowed;
}
.gc-btn:disabled svg[b-36qavbcaeh] { color: var(--filet); }

/* Les boutons et l'étape vont ensemble (sur mobile, les boutons y restent collés). */
.guide-priere[b-36qavbcaeh] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
}

/* --- Étape courante : la prière posée sur le vélin, ouverte par une lettrine --- */
.etape-courante[b-36qavbcaeh] {
    min-height: 220px;
    padding-top: 12px;
}
.etape-rubrique[b-36qavbcaeh] { margin-bottom: 0.2rem; }
.chapitre .etape-titre[b-36qavbcaeh] {
    margin: 0;
    font-family: 'Playfair Display', serif;
    font-weight: 400;
    font-size: clamp(1.7rem, 2.6vw, 2.15rem);
    line-height: 1.15;
    color: var(--navy);
    text-wrap: balance;
}
.etape-soustitre[b-36qavbcaeh] {
    margin: 0.4rem 0 0;
    font-family: 'Lora', serif;
    font-style: italic;
    font-size: 1.02rem;
    color: var(--ink-soft);
}

.etape-priere[b-36qavbcaeh],
.em-meditation[b-36qavbcaeh] {
    display: flow-root;
    max-width: 58ch;
    margin: 1.4rem 0 0;
    font-family: 'Lora', serif;
    font-size: 1.2rem;
    line-height: 1.85;
    color: var(--ink);
}
.etape-priere[b-36qavbcaeh]::first-letter,
.em-meditation[b-36qavbcaeh]::first-letter,
.priere-texte[b-36qavbcaeh]::first-letter {
    float: left;
    margin: 0.1em 0.14em 0 0;
    padding: 0.1em 0.16em 0.06em;
    font-family: 'Playfair Display', serif;
    font-style: normal;
    font-weight: 700;
    font-size: 2.65em;
    line-height: 0.92;
    color: var(--gold);
    background: var(--lettrine-fond);
    border: 3px double var(--gold);
}
/* Prière d'une seule ligne (signe de la croix) et « Amen » final : la lettrine monte au lieu
   de tomber, faute d'une deuxième ligne à qui s'accrocher. */
.etape-priere.courte[b-36qavbcaeh]::first-letter,
.priere-texte.courte[b-36qavbcaeh]::first-letter,
.fin-amen[b-36qavbcaeh]::first-letter {
    float: none;
    margin: 0 0.12em 0 0;
    padding: 0.08em 0.16em 0.04em;
    font-size: 1.55em;
    line-height: 1;
    vertical-align: -0.06em;
}

/* --- Clôture : le chapelet est achevé --- */
.etape-fin .etape-titre:focus[b-36qavbcaeh] { outline: none; }
.fin-ornement[b-36qavbcaeh] {
    display: block;
    width: 112px;
    height: 9px;
    margin: 1.6rem 0 1.1rem;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='112' height='9'%3E%3Cpath d='M0 4.5H46M66 4.5H112' stroke='%23c9a55a' stroke-width='1'/%3E%3Cpath d='M56 0.5 60 4.5 56 8.5 52 4.5Z' fill='%23c9a55a'/%3E%3C/svg%3E") left center / 112px 9px no-repeat;
}
.fin-amen[b-36qavbcaeh] {
    margin: 0;
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: 1.5rem;
    line-height: 1.6;
    color: var(--navy);
}
.fin-amen[b-36qavbcaeh]::first-letter {
    font-style: normal;
    font-weight: 700;
    color: var(--gold);
    background: var(--lettrine-fond);
    border: 3px double var(--gold);
}
.fin-demain[b-36qavbcaeh] {
    margin: 0.9rem 0 0;
    font-family: 'Lora', serif;
    font-style: italic;
    font-size: 1rem;
    color: var(--ink-soft);
}

.etape-priere-masquee[b-36qavbcaeh] {
    margin: 1.4rem 0 0;
    padding-left: 14px;
    border-left: 1px solid var(--gold);
    font-family: 'Lora', serif;
    font-style: italic;
    color: var(--ink-soft);
}

.em-meta[b-36qavbcaeh],
.mi-meta[b-36qavbcaeh] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem 1.4rem;
    margin: 1rem 0 0;
    font-family: 'Lora', serif;
    font-size: 0.98rem;
    color: var(--ink-soft);
}
/* La référence est déjà une rubrique rouge : le fruit, lui, reste à l'encre. */
.em-fruit em[b-36qavbcaeh],
.mi-fruit em[b-36qavbcaeh] {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: 1.04em;
    color: var(--navy);
}

.guide-astuce[b-36qavbcaeh] {
    margin: 0;
    font-family: 'Lora', serif;
    font-style: italic;
    font-size: 0.88rem;
    color: var(--ink-soft);
}
.guide-astuce kbd[b-36qavbcaeh] {
    display: inline-block;
    min-width: 1.6em;
    padding: 0 0.3em;
    font-family: 'Lato', sans-serif;
    font-style: normal;
    font-size: 0.85em;
    line-height: 1.5;
    text-align: center;
    color: var(--navy);
    background: var(--ivory);
    border: 1px solid var(--gold);
    border-radius: 2px;
    box-shadow: none;
}

/* ============================================================
   LES MYSTÈRES : la rubrique et le titre en marge, les cinq à droite
   ============================================================ */
.mysteres[b-36qavbcaeh] {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 0 56px;
    align-items: start;
}
.mysteres .chapitre-tete[b-36qavbcaeh] {
    position: sticky;
    top: 104px;
    container-type: inline-size;   /* le titre se règle sur la largeur de la colonne (cqi) */
}
/* Colonne étroite : le titre garde la taille commune, réduite seulement s'il le faut pour que le nom
   le plus long (« Mystères douloureux », ~10,4 fois la taille du titre) tienne sur une ligne. */
.chapitre.mysteres .lettrine-h2[b-36qavbcaeh] { font-size: min(clamp(1.9rem, 3vw, 2.6rem), 9.4cqi); }
.mysteres-liste[b-36qavbcaeh] {
    margin: 0;
    padding: 0;
    list-style: none;
}
.mystere-item[b-36qavbcaeh] {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 0 12px;
    padding: 22px 0;
    border-bottom: 1px solid var(--filet);
}
/* En tête de liste, le filet du chapitre suffit : le premier mystère s'aligne sur la rubrique.
   En fin de liste, c'est le filet du chapitre suivant qui ferme. */
.mystere-item:first-child[b-36qavbcaeh] { padding-top: 2px; }
.mystere-item:last-child[b-36qavbcaeh] { padding-bottom: 0; border-bottom: 0; }
.mi-num[b-36qavbcaeh] {
    align-self: start;
    padding-top: 2px;
    font-family: 'Playfair Display', serif;
    font-size: 1.55rem;
    line-height: 1;
    color: var(--rubrique);
}
.chapitre .mi-titre[b-36qavbcaeh] {
    margin: 0 0 0.35rem;
    font-family: 'Playfair Display', serif;
    font-weight: 400;
    font-size: 1.3rem;
    line-height: 1.25;
    color: var(--navy);
}
.mi-encours[b-36qavbcaeh] {
    font-style: italic;
    font-size: 0.78em;
    color: var(--rubrique);
    white-space: nowrap;
}
.mi-meditation[b-36qavbcaeh] {
    max-width: 62ch;
    margin: 0;
    font-family: 'Lora', serif;
    font-size: 1.04rem;
    line-height: 1.65;
    color: var(--ink);
}
.mi-meta[b-36qavbcaeh] { margin-top: 0.6rem; font-size: 0.95rem; }

/* Le mystère que l'on médite dans le mode guidé : sa pastille passe sur la couleur du jour. */
.mystere-item.en-cours .mi-num[b-36qavbcaeh] {
    justify-self: start;
    padding: 0.18em 0.32em 0.12em;
    margin-top: -0.18em;
    font-weight: 700;
    font-size: 1.3rem;
    color: var(--gold);
    background: var(--lettrine-fond);
    border: 3px double var(--gold);
}

/* ============================================================
   LES PRIÈRES (accordéon sans boîtes) ET LA GLOSE « COMMENT PRIER »
   ============================================================ */
.textes[b-36qavbcaeh] {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 0 64px;
    align-items: start;
}

.chapelet-accordion[b-36qavbcaeh] {
    --bs-accordion-bg: transparent;
    --bs-accordion-color: var(--ink);
    --bs-accordion-border-width: 0;
    --bs-accordion-border-radius: 0;
    --bs-accordion-inner-border-radius: 0;
    --bs-accordion-btn-padding-x: 0;
    --bs-accordion-btn-padding-y: 0.95rem;
    --bs-accordion-btn-color: var(--navy);
    --bs-accordion-btn-bg: transparent;
    --bs-accordion-active-color: var(--navy);
    --bs-accordion-active-bg: transparent;
    --bs-accordion-btn-focus-box-shadow: none;
    --bs-accordion-btn-icon-width: 0.95rem;
    --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%238a6f2a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23a8322a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}
.chapelet-accordion .accordion-item[b-36qavbcaeh] {
    background: transparent;
    border: 0;
    border-top: 1px solid var(--filet);
    border-radius: 0;
}
.chapelet-accordion .accordion-item:last-child[b-36qavbcaeh] { border-bottom: 1px solid var(--filet); }
.chapelet-accordion .accordion-header[b-36qavbcaeh] { padding: 0; margin: 0; }
.chapelet-accordion .accordion-button[b-36qavbcaeh] {
    min-height: 52px;
    font-family: 'Playfair Display', serif;
    font-size: 1.18rem;
    line-height: 1.3;
    color: var(--navy);
    background: transparent;
    box-shadow: none;
    text-decoration: underline 1px transparent;
    text-underline-offset: 5px;
    transition: text-decoration-color 0.2s;
}
.chapelet-accordion .accordion-button:hover[b-36qavbcaeh] { text-decoration-color: var(--gold); }
.chapelet-accordion .accordion-button:not(.collapsed)[b-36qavbcaeh] {
    color: var(--navy);
    background: transparent;
    box-shadow: none;
}
.chapelet-accordion .accordion-button:focus[b-36qavbcaeh] { box-shadow: none; }
.chapelet-accordion .accordion-button:focus-visible[b-36qavbcaeh] {
    outline: 2px solid var(--navy);
    outline-offset: 3px;
}
.chapelet-accordion .accordion-body[b-36qavbcaeh] { padding: 0 0 1.6rem; }
.priere-quand[b-36qavbcaeh] {
    margin: 0 0 0.7rem;
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: 0.98rem;
    line-height: 1.45;
    color: var(--rubrique);
}
.priere-texte[b-36qavbcaeh] {
    display: flow-root;
    max-width: 60ch;
    font-family: 'Lora', serif;
    font-size: 1.08rem;
    line-height: 1.8;
    color: var(--ink);
}
.priere-texte[b-36qavbcaeh]::first-letter { font-size: 2.6em; }

/* Glose : filet d'or dans la marge, comme celle de l'Évangile du jour à l'accueil. */
.comment[b-36qavbcaeh] {
    padding-left: 32px;
    border-left: 1px solid var(--gold);
}
.comment .rubrique[b-36qavbcaeh] { margin-bottom: 0.25rem; }
.chapitre .comment h2[b-36qavbcaeh] {
    font-size: 1.5rem;
    line-height: 1.2;
}
.comment-chapeau[b-36qavbcaeh] {
    margin: 0.7rem 0 1.1rem;
    font-family: 'Lora', serif;
    font-size: 0.98rem;
    line-height: 1.6;
    color: var(--ink-soft);
}
.comment-liste[b-36qavbcaeh] {
    counter-reset: etape;
    margin: 0;
    padding: 0;
    list-style: none;
}
.comment-liste li[b-36qavbcaeh] {
    position: relative;
    padding: 0.65rem 0 0.65rem 2.4rem;
    border-top: 1px solid var(--filet);
    font-family: 'Lora', serif;
    font-size: 0.98rem;
    line-height: 1.6;
    color: var(--ink);
}
.comment-liste li[b-36qavbcaeh]::before {
    counter-increment: etape;
    content: counter(etape, upper-roman);
    position: absolute;
    left: 0;
    top: 0.62rem;
    font-family: 'Playfair Display', serif;
    font-size: 1.05rem;
    line-height: 1.55;
    color: var(--rubrique);
}
.comment-liste strong[b-36qavbcaeh] {
    font-weight: 700;
    color: var(--navy);
}
.comment-lien[b-36qavbcaeh] { margin: 0.6rem 0 0; }   /* le lien lui-même : comme .lien-guide, en tête de page */

/* ============================================================
   EXPLICIT : la page se referme sur la salutation de l'ange
   ============================================================ */
.explicit[b-36qavbcaeh] {
    margin-top: 24px;
    text-align: center;
}
/* Filet d'or interrompu par un losange, comme les bras des lettrines de l'accueil. */
.explicit-ornement[b-36qavbcaeh] {
    display: block;
    width: 168px;
    height: 9px;
    margin: 0 auto 20px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='168' height='9'%3E%3Cpath d='M0 4.5H74M94 4.5H168' stroke='%23c9a55a' stroke-width='1'/%3E%3Cpath d='M84 0.5 88 4.5 84 8.5 80 4.5Z' fill='%23c9a55a'/%3E%3C/svg%3E") center / 168px 9px no-repeat;
}
.explicit-citation[b-36qavbcaeh] { margin: 0; }
.explicit-citation p[b-36qavbcaeh] {
    max-width: 34ch;
    margin: 0 auto 10px;
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: 1.25rem;
    line-height: 1.5;
    color: var(--navy);
}
.explicit-citation cite[b-36qavbcaeh] {
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 0.72rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--rubrique);
}

/* ============================================================
   BANDEAU DES SÉRIES SUR QUATRE COLONNES ÉTROITES (720 à 1100 px)
   ============================================================ */
@media (max-width: 1099.98px) {
    .serie-btn[b-36qavbcaeh] { padding-inline: 6px; }
    .serie-btn-jours[b-36qavbcaeh] { letter-spacing: 0.1em; }
}

/* ============================================================
   TABLETTE (< 992 px)
   ============================================================ */
@media (max-width: 991.98px) {
    .mysteres[b-36qavbcaeh] { grid-template-columns: minmax(0, 1fr); }
    .mysteres .chapitre-tete[b-36qavbcaeh] { position: static; }
    /* Le déroulement passe avant les prières : on le lit avant d'y chercher un texte. */
    .textes[b-36qavbcaeh] {
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }
    .comment[b-36qavbcaeh] {
        order: -1;
        margin: 0 0 40px;
        padding: 0 0 40px;
        border-left: none;
        border-bottom: 1px solid var(--filet);
    }
}

/* ============================================================
   MODE GUIDÉ EN COLONNE (< 860 px) : le chapelet en vignette à côté
   de la progression, les contrôles et la prière sur toute la largeur.
   ============================================================ */
@media (max-width: 859.98px) {
    .guide-grid[b-36qavbcaeh] {
        grid-template-columns: clamp(104px, 28vw, 168px) minmax(0, 1fr);
        gap: 14px 20px;
    }
    .guide-panneau[b-36qavbcaeh] { display: contents; }
    .guide-rosaire[b-36qavbcaeh] {
        position: static;
        grid-column: 1;
        grid-row: 1 / span 2;
        align-self: center;
        padding: 0;
    }
    .guide-progress[b-36qavbcaeh] {
        grid-column: 2;
        grid-row: 1;
        align-self: end;
    }
    .guide-actions[b-36qavbcaeh] {
        grid-column: 2;
        grid-row: 2;
        align-self: start;
        flex-direction: column;
        align-items: flex-start;
        margin: 0;
    }
    .guide-priere[b-36qavbcaeh],
    .guide-astuce[b-36qavbcaeh],
    .guide-panneau > .visually-hidden[b-36qavbcaeh] { grid-column: 1 / -1; }
    .guide-priere[b-36qavbcaeh] { gap: 14px; }
    /* Les boutons restent sous l'en-tête fixe (80 px) pendant toute la lecture de la prière. */
    .guide-controls[b-36qavbcaeh] {
        position: sticky;
        top: 80px;
        z-index: 2;
        padding-block: 10px;
        background-color: var(--velin);
        background-image: var(--grain);
        border-bottom: 1px solid var(--filet);
    }
    .etape-courante[b-36qavbcaeh] { min-height: 0; padding-top: 4px; }
}

/* ============================================================
   MOBILE (< 720 px)
   ============================================================ */
@media (max-width: 719.98px) {
    .chapitre[b-36qavbcaeh] { padding-block: 44px; }
    .guide[b-36qavbcaeh] { padding-top: 40px; }
    .chapelet-lede[b-36qavbcaeh] { font-size: 1.04rem; }
    .lien-guide[b-36qavbcaeh] { margin-bottom: 1.4rem; }
    .chapelet-jour[b-36qavbcaeh] { font-size: 0.98rem; }

    .chapelet-series[b-36qavbcaeh] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px 0;
        padding: 16px 0 10px;
    }
    .serie-btn[b-36qavbcaeh] { padding: 12px 6px 10px; }
    /* Deux par ligne : pas de filet en début de ligne. */
    .serie-btn:nth-child(odd)[b-36qavbcaeh]::before { display: none; }
    .serie-btn-nom[b-36qavbcaeh] { gap: 8px; font-size: 1.08rem; }

    .gp-dizaines[b-36qavbcaeh] { gap: 7px; }
    .guide-controls[b-36qavbcaeh] { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: 10px; }
    .gc-btn[b-36qavbcaeh] { gap: 8px; padding-inline: 0.6rem; letter-spacing: 0.1em; }
    .guide-astuce[b-36qavbcaeh] { display: none; }
    .ga-toggle[b-36qavbcaeh],
    .ga-reset[b-36qavbcaeh] { min-height: 40px; font-size: 0.7rem; letter-spacing: 0.1em; }

    .chapitre .etape-titre[b-36qavbcaeh] { font-size: 1.6rem; }
    .etape-priere[b-36qavbcaeh],
    .em-meditation[b-36qavbcaeh] { font-size: 1.1rem; line-height: 1.75; }

    .mystere-item[b-36qavbcaeh] { grid-template-columns: 40px minmax(0, 1fr); padding: 18px 0; }
    .mi-num[b-36qavbcaeh] { font-size: 1.3rem; }
    .chapitre .mi-titre[b-36qavbcaeh] { font-size: 1.18rem; }
    /* Gras d'au moins 1,2 rem : « grand texte », lisible en or sur toutes les couleurs du jour. */
    .mystere-item.en-cours .mi-num[b-36qavbcaeh] { font-size: 1.2rem; }
    .explicit-citation p[b-36qavbcaeh] { font-size: 1.1rem; }
}

/* Moins de 375 px : « Précédent » prend sa largeur, « Suivant » le reste (il reste le plus large).
   Le partage 1 : 1,35 rognait la marge de « Précédent » (1 px à 320) ; un partage égal ne laisserait
   plus la place à « Recommencer » et son icône. Le corps de 0,78 rem tient jusqu'à 345 px. */
@media (max-width: 374.98px) {
    .guide-controls[b-36qavbcaeh] { grid-template-columns: auto minmax(0, 1fr); }
}
/* Moins de 345 px : corps réduit, pour que « Recommencer » garde sa marge ; il rejoint celui
   des boutons des actions (.ga-toggle, .ga-reset : 0,7 rem, plus haut). */
@media (max-width: 344.98px) {
    .gc-btn[b-36qavbcaeh] { gap: 6px; padding-inline: 0.5rem; font-size: 0.72rem; letter-spacing: 0.08em; }
}

/* Sur écran tactile, les flèches du clavier ne servent pas. */
@media (hover: none) and (pointer: coarse) {
    .guide-astuce[b-36qavbcaeh] { display: none; }
}

@media (forced-colors: active) {
    .etape-priere[b-36qavbcaeh]::first-letter,
    .em-meditation[b-36qavbcaeh]::first-letter,
    .priere-texte[b-36qavbcaeh]::first-letter,
    .fin-amen[b-36qavbcaeh]::first-letter { color: CanvasText; }
    .serie-btn.actif[b-36qavbcaeh] { border-color: Highlight; }
}

@media (prefers-reduced-motion: reduce) {
    .chapelet *[b-36qavbcaeh],
    .chapelet *[b-36qavbcaeh]::before,
    .chapelet *[b-36qavbcaeh]::after {
        transition: none !important;
    }
}
/* /Components/Pages/Compendium.razor.rz.scp.css */
/* ============================================================
   COMPENDIUM DU CATÉCHISME — « livre d'heures »
   Lu comme un catéchisme imprimé : numéro en marge, question en
   rubrique rouge, réponse en texte courant à la mesure d'un livre.
   Même grammaire que l'accueil : vélin (MainLayout), lettrines d'or
   sur la couleur du jour (--lettrine-fond), filets d'or ; ni panneau
   blanc, ni ombre. Aucun texte en or sur fond clair.
   ============================================================ */

.page-content[b-lq7tf1jfaw] {
    --marge-haute: 104px;   /* barre fixe (80 px) et un peu d'air, pour les ancres */
}

.page-content a[b-lq7tf1jfaw] {
    color: var(--navy);
    text-decoration: none;
}
.page-content a:focus-visible[b-lq7tf1jfaw],
.page-content button:focus-visible[b-lq7tf1jfaw],
.page-content summary:focus-visible[b-lq7tf1jfaw] {
    outline: 2px solid var(--navy);
    outline-offset: 3px;
    border-radius: 2px;
}

/* Les titres à petite lettrine (h2.lettrine-h2) gardent le padding de la règle commune d'app.css.
   :where() garde à cette remise à zéro la spécificité la plus faible : les titres qui ont leur propre
   padding (.theme-titre, numéro romain dans la marge des numéros) l'emportent sur elle. */
.page-content :where(h2:not(.lettrine-h2), h3, h4)[b-lq7tf1jfaw] {
    padding: 0;
}

/* Le J de Playfair descend sous la ligne : un cadre plus haut pour sa lettrine. */
.page-content h1.lettrine-j[b-lq7tf1jfaw]::first-letter,
.lettrine-h2.lettrine-j[b-lq7tf1jfaw]::first-letter {
    padding-bottom: 0.24em;
}
/* Lettrine tombante (data-lettrine, ou titre-long et titre-moyen avant la mesure : app.css) :
   le cadre allongé remonte d'autant, pour ne pas toucher la 3e ligne. */
.page-content h1.lettrine-j.titre-long:not([data-lettrine])[b-lq7tf1jfaw]::first-letter,
.page-content h1.lettrine-j[data-lettrine="tombante"][b-lq7tf1jfaw]::first-letter { margin-top: 0.05em; }
@media (max-width: 479.98px) {
    .page-content h1.lettrine-j.titre-moyen:not([data-lettrine])[b-lq7tf1jfaw]::first-letter { margin-top: 0.05em; }
}

/* Titre ouvert par un guillemet (h1 ou h2.lettrine-h2, voir ClasseTitre) : le « pend dans la marge,
   à gauche de la lettrine, qui reste sur la première lettre, comme dans les articles (Page.razor.css).
   Sous 768 px, la marge (20 px) est trop étroite : le « flotte devant la lettrine. Il ne doit pas
   rester dans le texte : ::first-letter le prendrait seul, à la place de la lettre. */
.titre-guillemet[b-lq7tf1jfaw] { position: relative; }
.guillemet-suspendu[b-lq7tf1jfaw] {
    position: absolute;
    top: 0.2em;
    right: 100%;
    padding-right: 0.12em;
}
@media (max-width: 767.98px) {
    .guillemet-suspendu[b-lq7tf1jfaw] {
        position: static;
        float: left;
        padding-right: 0.1em;
    }
}

.chapeau[b-lq7tf1jfaw] {
    margin: 1rem 0 0;
    max-width: 60ch;
    font-family: 'Lora', serif;
    font-size: 1.06rem;
    line-height: 1.65;
    color: var(--ink-soft);
}

/* Flèche (même tracé que l'accueil) */
.fleche[b-lq7tf1jfaw] {
    width: 20px;
    height: 10px;
    flex-shrink: 0;
    color: var(--gold-deep);
    transition: transform 0.3s;
}
.fleche-retour[b-lq7tf1jfaw] { transform: scaleX(-1); }
.fleche-haut[b-lq7tf1jfaw] { transform: rotate(-90deg); }

/* Mots trouvés par la recherche */
.page-content mark[b-lq7tf1jfaw],
.page-content[b-lq7tf1jfaw]  mark {
    padding: 0 0.08em;
    color: inherit;
    background: rgba(201, 165, 90, 0.34);
}

/* ============================================================
   BARRE D'OUTILS : un titre courant entre deux filets
   ============================================================ */
.barre[b-lq7tf1jfaw] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 32px;
    margin: -16px 0 44px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--gold);
}
.barre-nav[b-lq7tf1jfaw] { position: relative; }
.barre-nav > ul[b-lq7tf1jfaw] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 26px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.barre-lien[b-lq7tf1jfaw] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0;
    background: none;
    border: 0;
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    font-size: 0.74rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--navy);
    text-decoration: underline 1px transparent;
    text-underline-offset: 5px;
    transition: text-decoration-color 0.2s;
}
.barre-lien:hover[b-lq7tf1jfaw],
.barre-lien[aria-expanded="true"][b-lq7tf1jfaw] { text-decoration-color: var(--gold); }
.barre-lien[aria-current="page"][b-lq7tf1jfaw] { text-decoration-color: var(--rubrique); }
.barre-lien .bi[b-lq7tf1jfaw] { font-size: 0.95rem; color: var(--gold-deep); }
.barre-lien.dropdown-toggle[b-lq7tf1jfaw]::after {
    margin-left: 2px;
    color: var(--gold-deep);
}

/* Menus déroulants : vélin clair, filet d'or, sans ombre */
.barre-menu[b-lq7tf1jfaw] {
    min-width: 300px;
    margin-top: 2px !important;
    padding: 6px 0;
    background: var(--ivory);
    border: 1px solid var(--gold);
    border-radius: 0;
    box-shadow: none;
}
.barre-menu .dropdown-item[b-lq7tf1jfaw] {
    padding: 9px 18px;
    white-space: normal;
    font-family: 'Playfair Display', serif;
    font-size: 1.02rem;
    line-height: 1.3;
    color: var(--navy);
}
.barre-menu .dropdown-item:hover[b-lq7tf1jfaw],
.barre-menu .dropdown-item:focus[b-lq7tf1jfaw],
.barre-menu .dropdown-item:active[b-lq7tf1jfaw] {
    color: var(--navy);
    background: rgba(201, 165, 90, 0.16);
}
.barre-menu .dropdown-item:focus-visible[b-lq7tf1jfaw] {
    outline: 2px solid var(--navy);
    outline-offset: -2px;
}
.menu-num[b-lq7tf1jfaw] {
    display: block;
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-soft);
}
/* Index : les lettres en grille */
.barre-lettres[b-lq7tf1jfaw] {
    min-width: 0;
    width: 296px;
    padding: 8px;
}
.barre-lettres.show[b-lq7tf1jfaw] {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 2px;
}
.barre-lettres .dropdown-item[b-lq7tf1jfaw] {
    display: grid;
    place-items: center;
    min-height: 44px;
    padding: 0;
    font-size: 1.15rem;
}

/* Recherche : le champ commun du site et un bouton navy à filet d'or. Le dessin du champ (bord en
   or foncé, filet d'or intérieur, texte indicatif, focus) vient de .form-control (app.css) ; ici,
   seulement la taille. L'écart laisse au contour de focus (décalé de 3 px) la place de se dessiner. */
.barre-recherche[b-lq7tf1jfaw] {
    display: flex;
    align-items: stretch;
    gap: 10px;
    flex: 0 1 320px;
    min-width: 0;
}
.barre-recherche .form-control[b-lq7tf1jfaw] {
    flex: 1 1 auto;
    min-width: 0;
    height: 44px;
    padding: 8px 12px;
    font-size: 1rem;
}
/* La croix d'effacement du champ : à l'encre navy, et non le bleu du navigateur (comme /search). */
.barre-recherche .form-control[b-lq7tf1jfaw]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    margin-left: 10px;
    background: var(--navy);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2 2 12 12M12 2 2 12' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2 2 12 12M12 2 2 12' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E") center / contain no-repeat;
    cursor: pointer;
}
.barre-bouton[b-lq7tf1jfaw] {
    flex: none;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    color: var(--ivory);
    background: var(--navy);
    box-shadow: inset 0 0 0 3px var(--navy), inset 0 0 0 4px var(--gold);
    transition: background-color 0.25s;
}
.barre-bouton:hover[b-lq7tf1jfaw] {
    background: #23235c;
    box-shadow: inset 0 0 0 3px #23235c, inset 0 0 0 4px var(--gold);
}
/* Contraste élevé : fond et filet disparaissent ; un bord garde au bouton sa forme à côté du champ. */
@media (forced-colors: active) {
    .barre-bouton[b-lq7tf1jfaw] { border: 1px solid ButtonText; }
}

/* ============================================================
   EN-TÊTES DE PAGE
   ============================================================ */
/* Fil d'Ariane : Compendium › partie › section. Même dessin que celui de la Bible (.bible-fil) et
   des conciles : petites capitales Lato, liens soulignés d'or, séparateur rouge. Le séparateur suit
   chaque étape, pour qu'une ligne ne commence jamais par « › » ; il n'est pas lu (texte de
   remplacement vide). Le lien s'agrandit au doigt de 6 px en haut et en bas (padding et marge
   négative : environ 30 px de haut, sans rien déplacer) ; l'écart entre deux lignes vaut ces
   2 × 6 px, pour que la zone d'un lien n'empiète jamais sur le texte de la ligne voisine. */
.fil ol[b-lq7tf1jfaw] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    row-gap: 12px;
    margin: 0 0 18px;
    padding: 0;
    list-style: none;
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    font-size: 0.7rem;
    line-height: 1.6;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-soft);
}
.fil li[b-lq7tf1jfaw] { white-space: nowrap; }
.fil li:not(:last-child)[b-lq7tf1jfaw]::after {
    content: "›" / "";
    margin: 0 10px;
    color: var(--rubrique);
}
.fil a[b-lq7tf1jfaw] {
    display: inline-block;
    padding-block: 6px;
    margin-block: -6px;
    text-decoration: underline 1px var(--gold);
    text-underline-offset: 4px;
    transition: text-decoration-color 0.2s;
}
.fil a:hover[b-lq7tf1jfaw] { text-decoration-color: var(--rubrique); }

.tete-meta[b-lq7tf1jfaw] {
    margin: -1.1rem 0 2.4rem;
    font-family: 'Lora', serif;
    font-style: italic;
    font-size: 0.98rem;
    line-height: 1.5;
    color: var(--ink-soft);
}
.tete-sep[b-lq7tf1jfaw] { margin: 0 0.5em; }

/* ============================================================
   ACCUEIL DU COMPENDIUM
   ============================================================ */
.ouverture[b-lq7tf1jfaw] {
    display: grid;
    grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
    gap: 64px;
    align-items: start;
}

.preface[b-lq7tf1jfaw] {
    margin: 0;
    padding-left: 28px;
    border-left: 1px solid var(--gold);
    font-family: 'Lora', serif;
    font-size: 1.04rem;
    line-height: 1.75;
    color: var(--ink);
}
.preface p[b-lq7tf1jfaw] {
    margin: 0 0 1em;
    max-width: 66ch;
}
.preface > p:first-child[b-lq7tf1jfaw] {
    font-size: 1.14rem;
    line-height: 1.65;
    color: var(--ink-soft);
}
.preface footer[b-lq7tf1jfaw] {
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    font-size: 0.72rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--rubrique);
}
.preface cite[b-lq7tf1jfaw] { font-style: normal; }

/* Suite de la préface, à déplier */
.preface-suite[b-lq7tf1jfaw] { margin: 0 0 1.1em; }
.preface-suite summary[b-lq7tf1jfaw] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    list-style: none;
    cursor: pointer;
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--navy);
    text-decoration: underline 1px transparent;
    text-underline-offset: 5px;
    transition: text-decoration-color 0.2s;
}
.preface-suite summary[b-lq7tf1jfaw]::-webkit-details-marker { display: none; }
.preface-suite summary:hover[b-lq7tf1jfaw] { text-decoration-color: var(--gold); }
.preface-suite summary .fleche[b-lq7tf1jfaw] { transform: rotate(90deg); }
.preface-suite[open] summary .fleche[b-lq7tf1jfaw] { transform: rotate(-90deg); }
.preface-fermer[b-lq7tf1jfaw],
.preface-suite[open] .preface-ouvrir[b-lq7tf1jfaw] { display: none; }
.preface-suite[open] .preface-fermer[b-lq7tf1jfaw] { display: inline; }
.preface-suite[open] summary[b-lq7tf1jfaw] { margin-bottom: 0.6em; }

/* Emblème du Catéchisme, en arc sous double filet d'or */
.embleme[b-lq7tf1jfaw] {
    justify-self: center;
    width: 100%;
    max-width: 280px;
    margin: 8px 0 0;
}
.embleme-cadre[b-lq7tf1jfaw] {
    display: block;
    padding: 28px 30px 22px;
    background: var(--ivory);
    border: 3px double var(--gold);
    border-radius: 50% 50% 0 0 / 22% 22% 0 0;
}
.page-content .embleme img[b-lq7tf1jfaw] {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
}
.embleme figcaption[b-lq7tf1jfaw] {
    margin-top: 10px;
    font-family: 'Lora', serif;
    font-style: italic;
    font-size: 0.85rem;
    line-height: 1.45;
    text-align: center;
    color: var(--ink-soft);
}

.chapitre[b-lq7tf1jfaw] {
    margin-top: 72px;
    padding-top: 64px;
    border-top: 1px solid var(--filet);
}
.chapitre-tete[b-lq7tf1jfaw] { margin-bottom: 36px; }

/* Les quatre parties : vignettes en arc, comme les outils de l'accueil.
   Le lien ne porte que le titre ; son ::after couvre toute la vignette. */
.parties[b-lq7tf1jfaw] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 32px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.parties > li[b-lq7tf1jfaw] { scroll-margin-top: var(--marge-haute); }
.partie[b-lq7tf1jfaw] {
    position: relative;
    display: block;
}
.partie-image[b-lq7tf1jfaw] {
    display: block;
    aspect-ratio: 4 / 3;
    padding: 5px;
    background: var(--ivory);
    border: 3px double var(--gold);
    border-radius: 50% 50% 0 0 / 36% 36% 0 0;
    overflow: hidden;
}
.page-content .partie-image img[b-lq7tf1jfaw] {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    object-fit: cover;
    border-radius: 50% 50% 0 0 / 35% 35% 0 0;
}
.partie-num[b-lq7tf1jfaw] {
    display: block;
    margin: 16px 0 2px;
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: 0.98rem;
    line-height: 1.4;
    color: var(--rubrique);
}
.page-content .partie-titre[b-lq7tf1jfaw] {
    margin: 0 0 0.3rem;
    font-family: 'Playfair Display', serif;
    font-weight: 400;
    font-size: 1.3rem;
    line-height: 1.25;
    color: var(--navy);
}
.partie-titre a[b-lq7tf1jfaw] {
    text-decoration: underline 1px transparent;
    text-underline-offset: 5px;
    transition: text-decoration-color 0.2s;
}
.partie-titre a[b-lq7tf1jfaw]::after {
    content: "";
    position: absolute;
    inset: 0;
}
.partie:hover .partie-titre a[b-lq7tf1jfaw] { text-decoration-color: var(--gold); }
.page-content .partie-titre a:focus-visible[b-lq7tf1jfaw] { outline: none; }
.page-content .partie-titre a:focus-visible[b-lq7tf1jfaw]::after {
    outline: 2px solid var(--navy);
    outline-offset: 4px;
}
.partie-questions[b-lq7tf1jfaw] {
    display: block;
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-soft);
}
.partie-sections[b-lq7tf1jfaw] {
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--filet);
}
.partie-sections li[b-lq7tf1jfaw] {
    border-bottom: 1px solid var(--filet);
    scroll-margin-top: var(--marge-haute);
}
.partie-sections a[b-lq7tf1jfaw] {
    display: block;
    padding: 9px 0;
    font-family: 'Lora', serif;
    font-size: 0.92rem;
    line-height: 1.4;
    text-decoration: underline 1px transparent;
    text-underline-offset: 4px;
    transition: text-decoration-color 0.2s;
}
.partie-sections a:hover[b-lq7tf1jfaw] { text-decoration-color: var(--gold); }

/* Alphabet de l'index */
.alphabet ul[b-lq7tf1jfaw] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.alphabet a[b-lq7tf1jfaw] {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    font-family: 'Playfair Display', serif;
    font-size: 1.25rem;
    line-height: 1;
    color: var(--navy);
    border: 1px solid var(--filet);
    transition: border-color 0.2s, background-color 0.2s;
}
.alphabet a:hover[b-lq7tf1jfaw] {
    border-color: var(--gold);
    background: rgba(201, 165, 90, 0.14);
}
/* Lettre courante : grand texte (≥ 18,66 px gras) en or sur la couleur du jour, comme les lettrines. */
.alphabet a[aria-current="page"][b-lq7tf1jfaw] {
    font-weight: 700;
    color: var(--gold);
    background: var(--lettrine-fond);
    border: 3px double var(--gold);
}
@media (forced-colors: active) {
    .alphabet a[aria-current="page"][b-lq7tf1jfaw] { color: CanvasText; }
}

/* ============================================================
   TABLE DES MATIÈRES D'UNE PARTIE
   ============================================================ */
.toc-grille[b-lq7tf1jfaw] {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 64px;
    align-items: start;
}
/* L'icône reste en vue pendant la lecture de la table. */
.toc-image[b-lq7tf1jfaw] {
    position: sticky;
    top: var(--marge-haute);
    margin: 0;
    padding: 6px;
    background: var(--ivory);
    border: 3px double var(--gold);
    border-radius: 50% 50% 0 0 / 34% 34% 0 0;
    overflow: hidden;
}
.page-content .toc-image img[b-lq7tf1jfaw] {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 640 / 493;
    margin: 0;
    object-fit: cover;
    border-radius: 50% 50% 0 0 / 33% 33% 0 0;
}

/* Le filet sous le dernier chapitre sépare déjà deux sections. */
.toc-section[b-lq7tf1jfaw] { scroll-margin-top: var(--marge-haute); }
.toc-section + .toc-section[b-lq7tf1jfaw] {
    margin-top: 44px;
}
.toc-section .rubrique[b-lq7tf1jfaw] { margin-bottom: 0.2rem; }
.page-content .toc-section-titre[b-lq7tf1jfaw] {
    margin: 0 0 16px;
    font-family: 'Playfair Display', serif;
    font-weight: 400;
    font-size: clamp(1.5rem, 2.2vw, 1.85rem);
    line-height: 1.2;
    color: var(--navy);
    text-wrap: balance;
}
.toc-section-titre a[b-lq7tf1jfaw] {
    text-decoration: underline 1px transparent;
    text-underline-offset: 5px;
    transition: text-decoration-color 0.2s;
}
.toc-section-titre a:hover[b-lq7tf1jfaw] { text-decoration-color: var(--gold); }

.toc-chapitres[b-lq7tf1jfaw] {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--filet);
}
.toc-chapitres > li[b-lq7tf1jfaw] {
    padding: 14px 0 16px;
    border-bottom: 1px solid var(--filet);
    scroll-margin-top: var(--marge-haute);
}
.toc-chapitre[b-lq7tf1jfaw] { display: block; }
.toc-chapitre-num[b-lq7tf1jfaw] {
    display: block;
    margin-bottom: 2px;
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-soft);
}
.toc-ligne[b-lq7tf1jfaw] {
    display: flex;
    align-items: baseline;
    gap: 10px;
}
.toc-chapitre-titre[b-lq7tf1jfaw] {
    font-family: 'Playfair Display', serif;
    font-size: 1.2rem;
    line-height: 1.3;
    color: var(--navy);
    text-decoration: underline 1px transparent;
    text-underline-offset: 4px;
    transition: text-decoration-color 0.2s;
}
.toc-chapitre:hover .toc-chapitre-titre[b-lq7tf1jfaw],
.toc-chapitre:focus-visible .toc-chapitre-titre[b-lq7tf1jfaw] { text-decoration-color: var(--gold); }
/* Points de conduite, comme dans une table imprimée */
.toc-points[b-lq7tf1jfaw] {
    flex: 1 1 24px;
    min-width: 24px;
    border-bottom: 1px dotted var(--gold-deep);
    opacity: 0.6;
    transform: translateY(-4px);
}
.toc-q[b-lq7tf1jfaw] {
    flex: none;
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: 0.95rem;
    white-space: nowrap;
    color: var(--rubrique);
}
.toc-themes[b-lq7tf1jfaw] {
    margin: 6px 0 0;
    padding: 0;
    list-style: none;
    font-family: 'Lora', serif;
    font-size: 0.88rem;
    line-height: 1.55;
}
.toc-themes li[b-lq7tf1jfaw] { display: inline; }
/* Le point suit le thème : une ligne ne commence jamais par un séparateur. */
.toc-themes li:not(:last-child)[b-lq7tf1jfaw]::after {
    content: "\00a0· ";
    color: var(--ink-soft);
}
.toc-themes a[b-lq7tf1jfaw] {
    color: var(--ink-soft);
    text-decoration: underline 1px transparent;
    text-underline-offset: 3px;
    transition: text-decoration-color 0.2s, color 0.2s;
}
.toc-themes a:hover[b-lq7tf1jfaw] {
    color: var(--navy);
    text-decoration-color: var(--gold);
}

/* ============================================================
   CHAPITRE (ou section) : LECTURE AVEC MARGE
   Au-dessus de 1100 px, le sommaire et les voisins restent dans une
   marge à droite, sous un filet d'or, pendant toute la lecture.
   ============================================================ */
.lecture[b-lq7tf1jfaw] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 250px;
    column-gap: 56px;
    align-items: start;
}
.questions[b-lq7tf1jfaw] {
    --col-no: 64px;
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
}
.lecture-marge[b-lq7tf1jfaw] {
    grid-column: 2;
    grid-row: 1;
    position: sticky;
    top: var(--marge-haute);
    max-height: calc(100vh - var(--marge-haute) - 24px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 4px 0 4px 28px;
    border-left: 1px solid var(--gold);
    scrollbar-width: thin;
}

/* Sommaire : thèmes en chiffres romains, chapitres numérotés */
.sommaire[b-lq7tf1jfaw] { scroll-margin-top: var(--marge-haute); }
.sommaire .rubrique[b-lq7tf1jfaw] { margin-bottom: 0.4rem; }
.sommaire ol[b-lq7tf1jfaw] {
    margin: 0;
    padding: 0 0 0 2.1em;
}
.sommaire-themes[b-lq7tf1jfaw] { list-style: upper-roman; }
.sommaire-chapitres[b-lq7tf1jfaw] { list-style: decimal; }
.sommaire li[b-lq7tf1jfaw] {
    break-inside: avoid;
    padding: 3px 0;
    font-family: 'Lora', serif;
    font-size: 0.92rem;
    line-height: 1.4;
}
.sommaire li[b-lq7tf1jfaw]::marker {
    font-family: 'Playfair Display', serif;
    font-size: 0.92em;
    color: var(--rubrique);
}
.sommaire a[b-lq7tf1jfaw] {
    text-decoration: underline 1px transparent;
    text-underline-offset: 4px;
    transition: text-decoration-color 0.2s;
}
.sommaire a:hover[b-lq7tf1jfaw] { text-decoration-color: var(--gold); }

/* Chapitre sans thèmes : ses questions, numéro en rubrique */
.sommaire-questions ol[b-lq7tf1jfaw] {
    padding: 0;
    list-style: none;
}
.sommaire-questions li[b-lq7tf1jfaw] { padding: 4px 0; font-size: 0.88rem; }
.sommaire-questions a[b-lq7tf1jfaw] {
    display: grid;
    grid-template-columns: 2.1em minmax(0, 1fr);
}
.sq-no[b-lq7tf1jfaw] {
    font-variant-numeric: lining-nums;
    padding-right: 0.55em;
    text-align: right;
    font-family: 'Playfair Display', serif;
    color: var(--rubrique);
}

/* Voisins dans la marge : l'un sous l'autre, en petit */
.voisins-marge[b-lq7tf1jfaw] {
    margin-top: 22px;
    border-top: 1px solid var(--filet);
}
.sommaire + .voisins-marge[b-lq7tf1jfaw] { margin-top: 22px; }
.lecture-marge > .voisins-marge:first-child[b-lq7tf1jfaw] {
    margin-top: 0;
    border-top: 0;
}
.voisins-marge .voisin[b-lq7tf1jfaw] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 0 0;
}
.voisins-marge .voisin-sens[b-lq7tf1jfaw] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-soft);
}
.voisins-marge .fleche[b-lq7tf1jfaw] { width: 14px; height: 8px; }
.voisins-marge .voisin-nom[b-lq7tf1jfaw] {
    font-family: 'Playfair Display', serif;
    font-size: 1rem;
    line-height: 1.3;
    color: var(--navy);
    text-decoration: underline 1px transparent;
    text-underline-offset: 4px;
    transition: text-decoration-color 0.2s;
}
.voisins-marge .voisin:hover .voisin-nom[b-lq7tf1jfaw] { text-decoration-color: var(--gold); }

/* Lien « ↑ Dans ce chapitre » : sous 1100 px seulement (voir plus bas). */
.retour-sommaire[b-lq7tf1jfaw] { display: none; }

/* --- Thèmes : un filet d'or marqué d'un losange, le numéro romain dans la marge des numéros --- */
.theme[b-lq7tf1jfaw],
.chapitre-section[b-lq7tf1jfaw] {
    position: relative;
    margin-top: 64px;
    padding-top: 48px;
    scroll-margin-top: var(--marge-haute);
}
.theme[b-lq7tf1jfaw]::before,
.chapitre-section[b-lq7tf1jfaw]::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 9px;
    transform: translateY(-50%);
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9'%3E%3Cpath d='M4.5 0.5 8.5 4.5 4.5 8.5 0.5 4.5Z' fill='%23c9a55a'/%3E%3C/svg%3E") center / 9px 9px no-repeat,
        linear-gradient(var(--filet), var(--filet)) center / 100% 1px no-repeat;
}
/* Rien entre le titre de la page et le premier bloc : pas de second filet. */
.themes:first-child > .theme:first-child[b-lq7tf1jfaw],
.themes:first-child > .chapitre-section:first-child[b-lq7tf1jfaw] {
    margin-top: 0;
    padding-top: 0;
}
.themes:first-child > .theme:first-child[b-lq7tf1jfaw]::before,
.themes:first-child > .chapitre-section:first-child[b-lq7tf1jfaw]::before { display: none; }

.page-content .theme-titre[b-lq7tf1jfaw] {
    margin: 0 0 4px;
    padding-left: var(--col-no);
    text-indent: calc(-1 * var(--col-no));
    font-family: 'Playfair Display', serif;
    font-weight: 400;
    font-size: clamp(1.5rem, 2.3vw, 1.9rem);
    line-height: 1.25;
    color: var(--navy);
    text-wrap: balance;
}
.theme-no[b-lq7tf1jfaw] {
    display: inline-block;
    width: calc(var(--col-no) - 18px);
    margin-right: 18px;
    text-indent: 0;
    text-align: right;
    font-size: 0.66em;
    letter-spacing: 0.04em;
    color: var(--rubrique);
}
.chapitre-section .rubrique[b-lq7tf1jfaw],
.chapitre-section .lettrine-h2[b-lq7tf1jfaw] { margin-left: var(--col-no); }
.chapitre-section .lettrine-h2[b-lq7tf1jfaw] { margin-bottom: 8px; }
.chapitre-section .lettrine-h2 a:hover[b-lq7tf1jfaw] {
    text-decoration: underline 1px var(--gold);
    text-underline-offset: 5px;
}
.page-content .chapitre-section h3.theme-titre[b-lq7tf1jfaw] {
    margin-top: 52px;
    font-size: clamp(1.35rem, 1.9vw, 1.6rem);
}
.chapitre-section h3 .theme-no[b-lq7tf1jfaw] { font-size: 0.74em; }

/* Une question : numéro en marge, question en rubrique, réponse en texte courant */
.qr[b-lq7tf1jfaw] {
    position: relative;
    padding-left: var(--col-no);
    margin-top: 36px;
    scroll-margin-top: var(--marge-haute);
}
.questions > .qr:first-child[b-lq7tf1jfaw] { margin-top: 0; }
.page-content .qr-question[b-lq7tf1jfaw] {
    margin: 0 0 10px;
    max-width: 58ch;
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-weight: 400;
    font-size: 1.24rem;
    line-height: 1.4;
    color: var(--rubrique);
    text-wrap: pretty;
}
.qr-no[b-lq7tf1jfaw] {
    position: absolute;
    left: 0;
    width: calc(var(--col-no) - 18px);
    padding-top: 1px;
    font-style: normal;
    font-size: 1.5rem;
    line-height: 1.15;
    text-align: right;
    font-variant-numeric: lining-nums;
}
.qr-reponse[b-lq7tf1jfaw] {
    max-width: 68ch;
    font-family: 'Lora', serif;
    font-size: 1.06rem;
    line-height: 1.75;
    color: var(--ink);
}
.qr-citation[b-lq7tf1jfaw] {
    max-width: 64ch;
    margin: 14px 0 0;
    padding: 2px 0 2px 1.2rem;
    border-left: 3px double var(--gold);
    font-family: 'Lora', serif;
    font-style: italic;
    font-size: 0.98rem;
    line-height: 1.7;
    color: var(--ink-soft);
}
.qr-reponse[b-lq7tf1jfaw]  a:not(.bible-ref),
.qr-citation[b-lq7tf1jfaw]  a:not(.bible-ref) {
    text-decoration: underline 1px var(--gold);
    text-underline-offset: 3px;
}
.qr-pied[b-lq7tf1jfaw] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 32px;
    margin: 6px 0 0;
}
.qr-plus[b-lq7tf1jfaw] {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 12px;
    min-height: 44px;
    padding: 0;
    background: none;
    border: 0;
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-align: left;
    color: var(--navy);
    cursor: pointer;
}
.qr-cec[b-lq7tf1jfaw] {
    font-family: 'Lora', serif;
    font-style: italic;
    font-weight: 400;
    font-size: 0.88rem;
    letter-spacing: 0;
    text-transform: none;
    color: var(--ink-soft);
}
.qr-cec sup[b-lq7tf1jfaw] { font-size: 0.7em; }
.qr-plus:hover .fleche[b-lq7tf1jfaw],
.qr-lieu:hover .fleche[b-lq7tf1jfaw],
.suite-suiv:hover .fleche[b-lq7tf1jfaw] { transform: translateX(4px); }
.qr-plus:hover[b-lq7tf1jfaw] { text-decoration: underline 1px var(--gold); text-underline-offset: 5px; }

.qr-lieu[b-lq7tf1jfaw] {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 10px;
    min-height: 44px;
    padding: 10px 0;
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: 0.98rem;
    line-height: 1.4;
}
.qr-lieu:hover[b-lq7tf1jfaw] { text-decoration: underline 1px var(--gold); text-underline-offset: 4px; }
.qr-lieu-label[b-lq7tf1jfaw] {
    font-family: 'Lato', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

/* Chapitres (ou parties, ou sections) précédent et suivant */
.suite[b-lq7tf1jfaw] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px;
    margin-top: 72px;
    border-top: 1px solid var(--gold);
    border-bottom: 1px solid var(--filet);
}
.suite-lien[b-lq7tf1jfaw] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 22px 0;
}
.suite-suiv[b-lq7tf1jfaw] {
    grid-column: 2;
    align-items: flex-end;
    text-align: right;
}
.suite-sens[b-lq7tf1jfaw] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-soft);
}
.suite-titre[b-lq7tf1jfaw] {
    font-family: 'Playfair Display', serif;
    font-size: 1.35rem;
    line-height: 1.25;
    color: var(--navy);
    text-wrap: balance;
    text-decoration: underline 1px transparent;
    text-underline-offset: 5px;
    transition: text-decoration-color 0.2s;
}
.suite-lien:hover .suite-titre[b-lq7tf1jfaw],
.suite-lien:focus-visible .suite-titre[b-lq7tf1jfaw] { text-decoration-color: var(--gold); }
.suite-prec:hover .fleche-retour[b-lq7tf1jfaw] { transform: scaleX(-1) translateX(4px); }
.suite-lieu[b-lq7tf1jfaw] {
    font-family: 'Lora', serif;
    font-style: italic;
    font-size: 0.88rem;
    line-height: 1.45;
    color: var(--ink-soft);
}

/* ============================================================
   INDEX ANALYTIQUE
   ============================================================ */
.page-content .titre-lettre[b-lq7tf1jfaw] {
    display: flex;
    align-items: center;
    gap: 28px;
}
.grande-lettre[b-lq7tf1jfaw] {
    display: grid;
    place-items: center;
    flex: none;
    width: 96px;
    height: 96px;
    margin: 6px;
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 4.2rem;
    line-height: 1;
    padding-top: 0.08em;
    color: var(--gold);
    background: var(--lettrine-fond);
    box-shadow: 0 0 0 1px var(--gold), 0 0 0 4px var(--velin), 0 0 0 5px var(--gold);
}
@media (forced-colors: active) {
    .grande-lettre[b-lq7tf1jfaw] { color: CanvasText; }
}
.titre-lettre-texte[b-lq7tf1jfaw] { display: block; }
.titre-lettre-texte .rubrique[b-lq7tf1jfaw] { margin: 0 0 0.1rem; }

.index-liste[b-lq7tf1jfaw] {
    columns: 3;
    column-gap: 48px;
    margin: 36px 0 0;
    padding: 0;
    list-style: none;
}
.index-liste > li[b-lq7tf1jfaw] {
    break-inside: avoid;
    padding: 5px 0;
}
.index-liste li[b-lq7tf1jfaw] { scroll-margin-top: var(--marge-haute); }
.index-terme[b-lq7tf1jfaw] {
    display: inline-block;
    padding: 3px 0;
    font-family: 'Playfair Display', serif;
    font-size: 1.1rem;
    line-height: 1.3;
    color: var(--navy);
}
a.index-terme[b-lq7tf1jfaw],
.index-liste ul a[b-lq7tf1jfaw] {
    text-decoration: underline 1px transparent;
    text-underline-offset: 4px;
    transition: text-decoration-color 0.2s;
}
a.index-terme:hover[b-lq7tf1jfaw],
.index-liste ul a:hover[b-lq7tf1jfaw] { text-decoration-color: var(--gold); }
span.index-terme[b-lq7tf1jfaw] { color: var(--ink-soft); }
.index-liste ul[b-lq7tf1jfaw] {
    margin: 2px 0 4px 2px;
    padding: 0 0 0 14px;
    list-style: none;
    border-left: 1px solid var(--filet);
}
.index-liste ul a[b-lq7tf1jfaw] {
    display: inline-block;
    padding: 3px 0;
    font-family: 'Lora', serif;
    font-size: 0.95rem;
    line-height: 1.35;
}

.vide[b-lq7tf1jfaw] {
    max-width: 60ch;
    font-family: 'Lora', serif;
    font-size: 1.05rem;
    line-height: 1.65;
    color: var(--ink-soft);
}
.vide p[b-lq7tf1jfaw] { margin: 0 0 18px; }

.retour-lettre[b-lq7tf1jfaw] {
    margin: 48px 0 0;
    padding-top: 12px;
    border-top: 1px solid var(--filet);
}
.retour-lettre a[b-lq7tf1jfaw] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.retour-lettre a:hover .fleche-retour[b-lq7tf1jfaw] { transform: scaleX(-1) translateX(4px); }

/* Source des textes */
.source[b-lq7tf1jfaw] {
    margin: 72px 0 0;
    padding-top: 14px;
    border-top: 1px solid var(--filet);
    font-family: 'Lora', serif;
    font-style: italic;
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--ink-soft);
}
.page-content .source a[b-lq7tf1jfaw] {
    text-decoration: underline 1px var(--gold);
    text-underline-offset: 3px;
}
.page-content .source a:hover[b-lq7tf1jfaw] { text-decoration-color: var(--rubrique); }

/* ============================================================
   FENÊTRE « EN SAVOIR PLUS » (extrait du Catéchisme)
   Un folio de vélin sous double filet d'or (fenêtre Bootstrap).
   ============================================================ */
.cec .modal-content[b-lq7tf1jfaw] {
    color: var(--ink);
    background-color: var(--velin);
    background-image: var(--grain);
    border: 3px double var(--gold);
    border-radius: 0;
}
.cec .cec-tete[b-lq7tf1jfaw] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 22px 16px 28px;
    border-bottom: 1px solid var(--gold);
    border-radius: 0;
}
.cec-tete .rubrique[b-lq7tf1jfaw] { margin: 0 0 2px; font-size: 0.95rem; }
.cec .cec-titre[b-lq7tf1jfaw] {
    margin: 0;
    padding: 0;
    font-family: 'Playfair Display', serif;
    font-weight: 400;
    font-size: 1.45rem;
    line-height: 1.25;
    color: var(--navy);
    text-wrap: balance;
}
.cec-nos[b-lq7tf1jfaw] {
    white-space: nowrap;
    font-style: italic;
    color: var(--rubrique);
}
.cec-nos sup[b-lq7tf1jfaw] { font-size: 0.6em; }
.cec-croix[b-lq7tf1jfaw] {
    flex: none;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    color: var(--navy);
    background: none;
    border: 1px solid transparent;
    transition: border-color 0.2s;
}
.cec-croix svg[b-lq7tf1jfaw] { width: 18px; height: 18px; }
.cec-croix:hover[b-lq7tf1jfaw] { border-color: var(--gold); }
.cec .cec-corps[b-lq7tf1jfaw] {
    overscroll-behavior: contain;
    padding: 22px 28px 8px;
    font-family: 'Lora', serif;
    font-size: 1.04rem;
    line-height: 1.75;
}
.cec-corps[b-lq7tf1jfaw]  p {
    max-width: 68ch;
    margin: 0 0 1em;
}
.cec-corps[b-lq7tf1jfaw]  p strong {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    color: var(--rubrique);
}
.cec .cec-pied[b-lq7tf1jfaw] {
    padding: 12px 28px;
    border-top: 1px solid var(--filet);
    border-radius: 0;
}
.cec-fermer[b-lq7tf1jfaw] {
    margin: 0;
    min-height: 44px;
    padding: 0 24px;
    border: 0;
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    font-size: 0.74rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ivory);
    background: var(--navy);
    box-shadow: inset 0 0 0 3px var(--navy), inset 0 0 0 4px var(--gold);
}
.cec-fermer:hover[b-lq7tf1jfaw] {
    background: #23235c;
    box-shadow: inset 0 0 0 3px #23235c, inset 0 0 0 4px var(--gold);
}
.cec-croix:focus-visible[b-lq7tf1jfaw],
.cec-fermer:focus-visible[b-lq7tf1jfaw],
.cec-corps:focus-visible[b-lq7tf1jfaw],
.cec-corps[b-lq7tf1jfaw]  a:focus-visible {
    outline: 2px solid var(--navy);
    outline-offset: 3px;
}
.cec-corps:focus-visible[b-lq7tf1jfaw] { outline-offset: -4px; }
.cec:focus[b-lq7tf1jfaw] { outline: none; }

/* ============================================================
   TABLETTE
   ============================================================ */
@media (max-width: 1099.98px) {
    .parties[b-lq7tf1jfaw] { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 44px; }
    .toc-grille[b-lq7tf1jfaw] { grid-template-columns: minmax(0, 1fr); gap: 40px; }
    .toc-image[b-lq7tf1jfaw] {
        position: static;
        justify-self: center;
        width: 100%;
        max-width: 560px;
    }
    .index-liste[b-lq7tf1jfaw] { columns: 2; }

    /* Une seule colonne : le sommaire au-dessus des questions, les voisins en bas de page. */
    .lecture[b-lq7tf1jfaw] { display: block; }
    .lecture-marge[b-lq7tf1jfaw] {
        position: static;
        max-height: none;
        overflow: visible;
        padding: 0;
        border-left: 0;
    }
    .sommaire-questions[b-lq7tf1jfaw] { display: none; }
    .lecture-marge:has(.sommaire:not(.sommaire-questions))[b-lq7tf1jfaw] {
        margin-bottom: 44px;
        padding-bottom: 24px;
        border-bottom: 1px solid var(--filet);
    }
    .voisins-marge[b-lq7tf1jfaw] { display: none; }
    .sommaire ol[b-lq7tf1jfaw] {
        columns: 2;
        column-gap: 48px;
    }
    .sommaire li[b-lq7tf1jfaw] { font-size: 0.98rem; }

    /* « ↑ Dans ce chapitre » reste au bas de l'écran pendant la lecture des thèmes. */
    .retour-sommaire[b-lq7tf1jfaw] {
        position: sticky;
        bottom: 14px;
        z-index: 2;
        display: flex;
        justify-content: flex-end;
        margin: 28px 0 0;
        pointer-events: none;
    }
    .retour-sommaire a[b-lq7tf1jfaw] {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        min-height: 40px;
        padding: 0 16px 0 14px;
        pointer-events: auto;
        font-family: 'Lato', sans-serif;
        font-weight: 700;
        font-size: 0.7rem;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--ivory);
        background: var(--navy);
        box-shadow: inset 0 0 0 3px var(--navy), inset 0 0 0 4px var(--gold);
    }
    .retour-sommaire .fleche[b-lq7tf1jfaw] { color: var(--gold); width: 16px; }
}

@media (max-width: 899.98px) {
    .ouverture[b-lq7tf1jfaw] { grid-template-columns: minmax(0, 1fr); gap: 40px; }
    .embleme[b-lq7tf1jfaw] { max-width: 220px; }
}

/* ============================================================
   MOBILE (< 768 px)
   ============================================================ */
@media (max-width: 767.98px) {
    .barre[b-lq7tf1jfaw] {
        gap: 4px 0;
        margin-bottom: 32px;
        padding-bottom: 12px;
    }
    .barre-nav[b-lq7tf1jfaw] { width: 100%; }
    .barre-nav > ul[b-lq7tf1jfaw] {
        flex-wrap: nowrap;
        gap: 0 16px;
    }
    .barre-lien[b-lq7tf1jfaw] { font-size: 0.7rem; letter-spacing: 0.08em; }
    /* « Accueil » et « analytique » ne se lisent plus qu'au lecteur d'écran : la barre tient sur une ligne. */
    .barre-accueil .barre-texte[b-lq7tf1jfaw],
    .barre-long[b-lq7tf1jfaw] {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
    .barre-accueil[b-lq7tf1jfaw] { min-width: 44px; justify-content: center; }
    .barre-accueil .bi[b-lq7tf1jfaw] { font-size: 1.1rem; }
    .barre-recherche[b-lq7tf1jfaw] { flex: 1 1 100%; }
    /* Les menus s'ouvrent sur toute la largeur de la colonne, sous la barre. */
    .barre-nav .dropdown[b-lq7tf1jfaw] { position: static; }
    .barre-menu[data-bs-popper][b-lq7tf1jfaw] {
        left: 0;
        right: 0;
        width: auto;
        min-width: 0;
        max-width: none;
    }

    .preface[b-lq7tf1jfaw] { padding-left: 18px; font-size: 1rem; }
    .preface > p:first-child[b-lq7tf1jfaw] { font-size: 1.06rem; }

    .chapitre[b-lq7tf1jfaw] { margin-top: 56px; padding-top: 48px; }
    .parties[b-lq7tf1jfaw] { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .parties > li[b-lq7tf1jfaw] {
        padding: 18px 0;
        border-bottom: 1px solid var(--filet);
    }
    .parties > li:first-child[b-lq7tf1jfaw] { border-top: 1px solid var(--filet); }
    .partie[b-lq7tf1jfaw] {
        display: grid;
        grid-template-columns: 96px minmax(0, 1fr);
        column-gap: 18px;
        align-items: center;
    }
    .partie-image[b-lq7tf1jfaw] {
        grid-row: 1 / span 3;
        padding: 3px;
        aspect-ratio: 4 / 5;
    }
    .partie-num[b-lq7tf1jfaw] { margin: 0; font-size: 0.92rem; }
    .page-content .partie-titre[b-lq7tf1jfaw] { font-size: 1.2rem; }
    .partie-sections[b-lq7tf1jfaw] { margin-top: 10px; border-top: 0; }
    .partie-sections li:last-child[b-lq7tf1jfaw] { border-bottom: 0; }

    .alphabet ul[b-lq7tf1jfaw] { gap: 4px; }
    .alphabet a[b-lq7tf1jfaw] { width: 40px; height: 44px; font-size: 1.15rem; }

    .toc-ligne[b-lq7tf1jfaw] { flex-wrap: wrap; gap: 0 10px; }
    .toc-points[b-lq7tf1jfaw] { display: none; }
    .toc-chapitre-titre[b-lq7tf1jfaw] { font-size: 1.12rem; }

    .sommaire ol[b-lq7tf1jfaw] { columns: 1; }

    .questions[b-lq7tf1jfaw] { --col-no: 0px; }
    .qr[b-lq7tf1jfaw] { margin-top: 30px; }
    .page-content .qr-question[b-lq7tf1jfaw] { font-size: 1.14rem; }
    .qr-no[b-lq7tf1jfaw] {
        position: static;
        display: inline;
        width: auto;
        margin-right: 0.3em;
        padding: 0;
        font-size: 1.14rem;
    }
    .qr-reponse[b-lq7tf1jfaw] { font-size: 1.01rem; line-height: 1.72; }
    .theme[b-lq7tf1jfaw],
    .chapitre-section[b-lq7tf1jfaw] { margin-top: 48px; padding-top: 36px; }
    .page-content .theme-titre[b-lq7tf1jfaw] { text-indent: 0; }
    .theme-no[b-lq7tf1jfaw] {
        width: auto;
        margin-right: 0.35em;
        font-size: 0.8em;
    }
    .theme-no[b-lq7tf1jfaw]::after { content: "."; }

    .suite[b-lq7tf1jfaw] {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
        margin-top: 56px;
    }
    .suite-suiv[b-lq7tf1jfaw] {
        grid-column: 1;
        border-top: 1px solid var(--filet);
    }
    .suite-lien[b-lq7tf1jfaw] { padding: 18px 0; }
    .suite-titre[b-lq7tf1jfaw] { font-size: 1.2rem; }

    .page-content .titre-lettre[b-lq7tf1jfaw] { gap: 18px; }
    .grande-lettre[b-lq7tf1jfaw] {
        width: 72px;
        height: 72px;
        font-size: 3rem;
        box-shadow: 0 0 0 1px var(--gold), 0 0 0 3px var(--velin), 0 0 0 4px var(--gold);
    }
    .index-liste[b-lq7tf1jfaw] { columns: 1; }

    .cec .cec-tete[b-lq7tf1jfaw] { padding: 16px 10px 12px 18px; }
    .cec .cec-corps[b-lq7tf1jfaw] { padding: 18px 18px 4px; font-size: 1rem; }
    .cec .cec-pied[b-lq7tf1jfaw] { padding: 10px 18px; }
    .cec .cec-titre[b-lq7tf1jfaw] { font-size: 1.2rem; }
}

@media (prefers-reduced-motion: reduce) {
    .page-content *[b-lq7tf1jfaw],
    .page-content *[b-lq7tf1jfaw]::before,
    .page-content *[b-lq7tf1jfaw]::after {
        transition: none !important;
    }
}
/* /Components/Pages/Conciles.razor.rz.scp.css */
/* ============================================================
   CONCILES ŒCUMÉNIQUES — « livre d'heures »
   Même grammaire que l'accueil : vélin (MainLayout), rubriques
   rouges, petites lettrines d'or sur la couleur du jour
   (--lettrine-fond), filets d'or ; ni carte, ni ombre.
   Aucun texte en or sur fond clair : le texte coloré est en
   --rubrique, l'or ne sert qu'aux filets et ornements.
   ============================================================ */

.page-content[b-ianzb2227l] {
    --marge-haute: 104px;   /* barre fixe (80 px) et un peu d'air, pour les ancres */
}

.page-content a[b-ianzb2227l] {
    color: var(--navy);
    text-decoration: none;
}
.page-content a:focus-visible[b-ianzb2227l],
.page-content summary:focus-visible[b-ianzb2227l] {
    outline: 2px solid var(--navy);
    outline-offset: 3px;
    border-radius: 2px;
}

/* Les titres à petite lettrine (h2.lettrine-h2) suivent la règle commune d'app.css. */
.page-content h2:not(.lettrine-h2)[b-ianzb2227l],
.page-content h3[b-ianzb2227l] {
    padding: 0;
}

.chapeau[b-ianzb2227l] {
    margin: 0;
    max-width: 60ch;
    font-family: 'Lora', serif;
    font-size: 1.14rem;
    line-height: 1.65;
    color: var(--ink-soft);
}

/* Flèche (même tracé que l'accueil) */
.fleche[b-ianzb2227l] {
    width: 20px;
    height: 10px;
    flex-shrink: 0;
    color: var(--gold-deep);
    transition: transform 0.3s;
}
.fleche-retour[b-ianzb2227l] { transform: scaleX(-1); }
.fleche-haut[b-ianzb2227l] { transform: rotate(-90deg); }

/* ============================================================
   ACCUEIL : OUVERTURE
   ============================================================ */
.ouverture[b-ianzb2227l] {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 64px;
    align-items: start;
    padding-bottom: 64px;
}

.ouverture-suite[b-ianzb2227l] {
    margin: 1rem 0 0;
    max-width: 62ch;
    font-family: 'Lora', serif;
    font-size: 1rem;
    line-height: 1.7;
    color: var(--ink);
}

/* Les trois époques, comme les colonnes d'un calendrier */
.epoques-nav[b-ianzb2227l] {
    margin-top: 32px;
    border-top: 1px solid var(--gold);
    border-bottom: 1px solid var(--filet);
}
.epoques-nav ul[b-ianzb2227l] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
}
.epoques-nav li + li[b-ianzb2227l] {
    border-left: 1px solid var(--filet);
}
.epoques-nav a[b-ianzb2227l] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-height: 44px;
    padding: 14px 16px;
}
.epoques-nav li:first-child a[b-ianzb2227l] { padding-left: 0; }
.epoques-nav a:focus-visible[b-ianzb2227l] { outline-offset: -2px; }
.epoques-nom[b-ianzb2227l] {
    font-family: 'Playfair Display', serif;
    font-size: 1.15rem;
    line-height: 1.25;
    color: var(--navy);
    text-decoration: underline 1px transparent;
    text-underline-offset: 4px;
    transition: text-decoration-color 0.2s;
}
.epoques-nav a:hover .epoques-nom[b-ianzb2227l] { text-decoration-color: var(--gold); }
.epoques-periode[b-ianzb2227l] {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: 0.92rem;
    color: var(--rubrique);
}

/* Miniature en arc, cadre « double filet d'or » */
.ouverture-image[b-ianzb2227l] {
    margin: 0;
    padding: 6px;
    background: var(--ivory);
    border: 3px double var(--gold);
    border-radius: 50% 50% 0 0 / 34% 34% 0 0;
    overflow: hidden;
}
.page-content .ouverture-image img[b-ianzb2227l] {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 640 / 490;
    object-fit: cover;
    margin: 0;
    border-radius: 50% 50% 0 0 / 33% 33% 0 0;
}

/* ============================================================
   ACCUEIL : ÉPOQUES ET FRISE
   ============================================================ */
.epoque[b-ianzb2227l] {
    display: grid;
    grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
    gap: 56px;
    padding-block: 64px;
    border-top: 1px solid var(--filet);
    scroll-margin-top: var(--marge-haute);
}

/* Titre d'époque en marge ; il suit la lecture quand la mise en page le permet. */
.epoque-tete[b-ianzb2227l] {
    position: sticky;
    top: var(--marge-haute);
    align-self: start;
}
.epoque-chapeau[b-ianzb2227l] {
    margin: 1rem 0 0;
    font-family: 'Lora', serif;
    font-size: 1rem;
    line-height: 1.65;
    color: var(--ink-soft);
}

/* La frise : années en rouge à gauche, filet d'or ponctué d'un losange par concile. */
.frise[b-ianzb2227l] {
    --col-annee: 80px;
    --gouttiere: 44px;
    position: relative;
    margin: 0;
    padding: 0;
    list-style: none;
}
.frise li[b-ianzb2227l] {
    position: relative;
    scroll-margin-top: var(--marge-haute);
}
.frise li[b-ianzb2227l]::before {
    content: "";
    position: absolute;
    left: calc(var(--col-annee) + var(--gouttiere) / 2);
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--gold);
    opacity: 0.7;
}
.frise li:first-child[b-ianzb2227l]::before { top: 36px; }
.frise li:last-child[b-ianzb2227l]::before { bottom: auto; height: 36px; }
.frise li:only-child[b-ianzb2227l]::before { display: none; }

.fiche[b-ianzb2227l] {
    position: relative;
    display: grid;
    grid-template-columns: var(--col-annee) minmax(0, 1fr);
    column-gap: var(--gouttiere);
    padding: 22px 0;
}
/* Losange d'or sur le filet */
.fiche[b-ianzb2227l]::before {
    content: "";
    position: absolute;
    left: calc(var(--col-annee) + var(--gouttiere) / 2 - 5px);
    top: 31px;
    width: 11px;
    height: 11px;
    background: var(--velin);
    border: 1px solid var(--gold);
    transform: rotate(45deg);
    transition: background-color 0.2s, border-color 0.2s;
}
.fiche:hover[b-ianzb2227l]::before,
.fiche:focus-within[b-ianzb2227l]::before {
    background: var(--rubrique);
    border-color: var(--rubrique);
}
.fiche-annee[b-ianzb2227l] {
    padding-top: 6px;
    font-family: 'Playfair Display', serif;
    font-size: 1.6rem;
    line-height: 1;
    text-align: right;
    font-variant-numeric: lining-nums;
    color: var(--rubrique);
}
.fiche-corps[b-ianzb2227l] {
    display: block;
    max-width: 62ch;
}
.fiche-theme[b-ianzb2227l] {
    display: block;
    margin: 0 0 2px;
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: 0.98rem;
    line-height: 1.4;
    color: var(--rubrique);
}
.page-content .fiche-nom[b-ianzb2227l] {
    margin: 0;
    font-family: 'Playfair Display', serif;
    font-weight: 400;
    font-size: 1.5rem;
    line-height: 1.2;
    color: var(--navy);
}
/* Le lien ne porte que le nom ; son ::after couvre toute la fiche. */
.fiche-nom a[b-ianzb2227l] {
    text-decoration: underline 1px transparent;
    text-underline-offset: 5px;
    transition: text-decoration-color 0.2s;
}
.fiche-nom a[b-ianzb2227l]::after {
    content: "";
    position: absolute;
    inset: 0;
}
.fiche:hover .fiche-nom a[b-ianzb2227l] { text-decoration-color: var(--gold); }
.page-content .fiche-nom a:focus-visible[b-ianzb2227l] { outline: none; }
.page-content .fiche-nom a:focus-visible[b-ianzb2227l]::after {
    outline: 2px solid var(--navy);
    outline-offset: -2px;
}
.fiche-lieu[b-ianzb2227l] {
    display: block;
    margin: 4px 0 0;
    font-family: 'Lato', sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-soft);
}
.fiche-resume[b-ianzb2227l] {
    display: block;
    margin: 8px 0 0;
    font-family: 'Lora', serif;
    font-size: 0.98rem;
    line-height: 1.6;
    color: var(--ink-soft);
}

/* ============================================================
   DÉTAIL D'UN CONCILE
   ============================================================ */
/* Fil d'Ariane : Conciles œcuméniques › concile. Même dessin que celui de la Bible (.bible-fil) et du
   Compendium : petites capitales Lato, liens soulignés d'or, séparateur rouge non lu, page courante
   en encre douce. Le lien s'agrandit au doigt de 6 px en haut et en bas (padding et marge négative :
   environ 30 px de haut, sans rien déplacer) ; l'écart entre deux lignes vaut ces 2 × 6 px, pour que
   la zone d'un lien n'empiète jamais sur le texte de la ligne voisine. */
.fil ol[b-ianzb2227l] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    row-gap: 12px;
    margin: 0 0 18px;
    padding: 0;
    list-style: none;
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    font-size: 0.7rem;
    line-height: 1.6;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-soft);
}
.fil li[b-ianzb2227l] { white-space: nowrap; }
.fil li:not(:last-child)[b-ianzb2227l]::after {
    content: "›" / "";
    margin: 0 10px;
    color: var(--rubrique);
}
.fil a[b-ianzb2227l] {
    display: inline-block;
    padding-block: 6px;
    margin-block: -6px;
    text-decoration: underline 1px var(--gold);
    text-underline-offset: 4px;
    transition: text-decoration-color 0.2s;
}
.fil a:hover[b-ianzb2227l] { text-decoration-color: var(--rubrique); }

.concile-tete .chapeau[b-ianzb2227l] {
    margin-top: -0.6rem;
    font-size: 1.2rem;
}

.concile-grille[b-ianzb2227l] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 250px;
    gap: 56px;
    margin-top: 48px;
}
.concile-texte[b-ianzb2227l] {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
}

/* Marge : un filet d'or sur toute la hauteur du texte. La fiche défile avec la page ;
   le sommaire et les conciles voisins restent en vue pendant toute la lecture. */
.concile-marge[b-ianzb2227l] {
    grid-column: 2;
    grid-row: 1;
    padding-left: 28px;
    border-left: 1px solid var(--gold);
}
.marge-collante[b-ianzb2227l] {
    position: sticky;
    top: var(--marge-haute);
    max-height: calc(100vh - var(--marge-haute) - 24px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
}

.fiche-concile[b-ianzb2227l] {
    margin: 0 0 28px;
}
.fiche-concile div[b-ianzb2227l] {
    padding: 10px 0;
    border-bottom: 1px solid var(--filet);
}
.fiche-concile div:first-child[b-ianzb2227l] { padding-top: 0; }
.fiche-concile dt[b-ianzb2227l] {
    font-family: 'Lato', sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-soft);
}
.fiche-concile dd[b-ianzb2227l] {
    margin: 2px 0 0;
    font-family: 'Playfair Display', serif;
    font-size: 1.05rem;
    line-height: 1.35;
    color: var(--navy);
}

.sommaire[b-ianzb2227l] {
    scroll-margin-top: var(--marge-haute);
}
.sommaire-titre[b-ianzb2227l] { margin-bottom: 0.4rem; }
.sommaire ol[b-ianzb2227l] {
    margin: 0;
    padding: 0;
    list-style: none;
}
.sommaire > ol > li[b-ianzb2227l] {
    padding: 4px 0;
}
.sommaire a[b-ianzb2227l] {
    display: inline-block;
    padding: 4px 0;
    font-family: 'Playfair Display', serif;
    font-size: 1.02rem;
    line-height: 1.3;
    text-decoration: underline 1px transparent;
    text-underline-offset: 4px;
    transition: text-decoration-color 0.2s;
}
.sommaire a:hover[b-ianzb2227l] { text-decoration-color: var(--gold); }
.sommaire-duree[b-ianzb2227l] {
    display: block;
    font-family: 'Lora', serif;
    font-style: italic;
    font-size: 0.82rem;
    color: var(--ink-soft);
}
.sommaire .sommaire-parties[b-ianzb2227l] {
    margin: 6px 0 0;
    padding-left: 12px;
    border-left: 1px solid var(--filet);
}
.sommaire-parties a[b-ianzb2227l] {
    padding: 3px 0;
    font-family: 'Lora', serif;
    font-size: 0.84rem;
    line-height: 1.35;
}
.sommaire-parties a.capitales[b-ianzb2227l] {
    font-family: 'Lato', sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
}
/* Dans la marge, les sessions (Trente) se réduisent à leur numéro, comme l'alphabet d'un index ;
   leur titre complet reste le nom du lien. */
.sommaire-sessions-titre[b-ianzb2227l],
.sommaire .sommaire-sessions[b-ianzb2227l] { display: none; }
@media (min-width: 1100px) {
    .sommaire-parties:has(+ .sommaire-sessions-titre)[b-ianzb2227l] { display: none; }
    .sommaire-sessions-titre[b-ianzb2227l] {
        display: block;
        margin: 10px 0 6px;
        font-family: 'Lato', sans-serif;
        font-size: 0.7rem;
        font-weight: 700;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--ink-soft);
    }
    .sommaire .sommaire-sessions[b-ianzb2227l] {
        display: grid;
        grid-template-columns: repeat(5, 38px);
        gap: 4px;
    }
    .sommaire-sessions a[b-ianzb2227l] {
        display: grid;
        place-items: center;
        width: 38px;
        height: 38px;
        padding: 0;
        font-family: 'Playfair Display', serif;
        font-size: 1rem;
        line-height: 1;
        border: 1px solid var(--filet);
        transition: border-color 0.2s, background-color 0.2s;
    }
    .sommaire-sessions a:hover[b-ianzb2227l] {
        border-color: var(--gold);
        background: rgba(201, 165, 90, 0.14);
    }
}

/* --- Chapitres du concile --- */
.chapitre[b-ianzb2227l] {
    padding-top: 48px;
    margin-top: 48px;
    border-top: 1px solid var(--filet);
    scroll-margin-top: var(--marge-haute);
}
.chapitre:first-child[b-ianzb2227l] {
    padding-top: 0;
    margin-top: 0;
    border-top: 0;
}
.chapitre .lettrine-h2[b-ianzb2227l] {
    margin-bottom: 1.4rem;
}

.texte-courant[b-ianzb2227l] {
    margin: 0;
    max-width: 68ch;
    font-family: 'Lora', serif;
    font-size: 1.06rem;
    line-height: 1.75;
    color: var(--ink);
}

/* Papes : médaillons ronds cerclés d'or */
.papes[b-ianzb2227l] {
    display: grid;
    gap: 28px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.pape[b-ianzb2227l] {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}
.pape-medaillon[b-ianzb2227l] {
    display: grid;
    place-items: center;
    width: 96px;
    height: 96px;
    padding: 4px;
    background: var(--ivory);
    border: 3px double var(--gold);
    border-radius: 50%;
    overflow: hidden;
}
.page-content .pape-medaillon img[b-ianzb2227l] {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    object-fit: cover;
    object-position: top center;
    border-radius: 50%;
}
.pape-initiale[b-ianzb2227l] {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 2rem;
    color: var(--gold);
    background: var(--lettrine-fond);
}
.page-content .pape-nom[b-ianzb2227l] {
    margin: 0;
    font-family: 'Playfair Display', serif;
    font-weight: 400;
    font-size: 1.3rem;
    line-height: 1.25;
    color: var(--navy);
}
.pape-role[b-ianzb2227l] {
    margin: 2px 0 8px;
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: 0.98rem;
    color: var(--rubrique);
}
.pape-texte[b-ianzb2227l] {
    margin: 0;
    max-width: 62ch;
    font-family: 'Lora', serif;
    font-size: 1rem;
    line-height: 1.7;
    color: var(--ink-soft);
}

/* Enseignements : listes à losanges d'or */
.enseignements[b-ianzb2227l]  ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.enseignements[b-ianzb2227l]  li {
    position: relative;
    margin: 0 0 1rem;
    padding-left: 1.6rem;
}
.enseignements[b-ianzb2227l]  li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 0.62em;
    width: 7px;
    height: 7px;
    background: var(--gold);
    transform: rotate(45deg);
}
.enseignements[b-ianzb2227l]  strong {
    font-weight: 700;
    color: var(--navy);
}

/* Textes clés : titres en rubrique (h3, sous le h2 « Textes clés »), citations en retrait sous double filet */
.conciles-textes-cles[b-ianzb2227l] {
    max-width: 68ch;
    font-family: 'Lora', serif;
    font-size: 1.04rem;
    line-height: 1.75;
    color: var(--ink);
}
.conciles-textes-cles[b-ianzb2227l]  h3 {
    margin: 2rem 0 0.6rem;
    padding: 0;
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-weight: 400;
    font-size: 1.15rem;
    line-height: 1.4;
    color: var(--rubrique);
}
.conciles-textes-cles[b-ianzb2227l]  h3:first-child { margin-top: 0; }
.conciles-textes-cles[b-ianzb2227l]  blockquote,
.conciles-deroulement[b-ianzb2227l]  blockquote {
    margin: 0 0 1.2rem;
    padding: 2px 0 2px 1.4rem;
    border-left: 3px double var(--gold);
    background: none;
    font-family: 'Lora', serif;
    font-style: italic;
    line-height: 1.75;
    color: var(--ink);
}

/* Déroulement : récit ancien, mesure de livre */
.recit-duree[b-ianzb2227l] {
    font-family: 'Lora', serif;
    font-style: italic;
    font-weight: 400;
    font-size: 0.92rem;
    letter-spacing: 0;
    text-transform: none;
    color: var(--ink-soft);
}
.recit-duree-seule[b-ianzb2227l] { margin: -0.6rem 0 1.6rem; }

/* Long récit sans intertitres : replié sous une ligne « Lire le récit détaillé ». */
.recit summary[b-ianzb2227l] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 12px;
    min-height: 44px;
    padding: 10px 0;
    list-style: none;
    cursor: pointer;
    border-top: 1px solid var(--filet);
    border-bottom: 1px solid var(--filet);
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    font-size: 0.74rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--navy);
}
.recit summary[b-ianzb2227l]::-webkit-details-marker { display: none; }
.recit summary .fleche[b-ianzb2227l] { transform: rotate(90deg); }
.recit[open] summary .fleche[b-ianzb2227l] { transform: rotate(-90deg); }
.recit summary:hover .recit-ouvrir[b-ianzb2227l],
.recit summary:hover .recit-fermer[b-ianzb2227l] {
    text-decoration: underline 1px var(--gold);
    text-underline-offset: 5px;
}
.recit-fermer[b-ianzb2227l],
.recit[open] .recit-ouvrir[b-ianzb2227l] { display: none; }
.recit[open] .recit-fermer[b-ianzb2227l] { display: inline; }
.recit[open] summary[b-ianzb2227l] { margin-bottom: 2rem; }

/* Renvoi (Vatican II) : une simple glose en fin de page. */
.renvoi[b-ianzb2227l] {
    margin-top: 48px;
    padding: 14px 0 0;
    border-top: 1px solid var(--filet);
    max-width: 68ch;
    font-family: 'Lora', serif;
    font-size: 1.04rem;
    line-height: 1.7;
    color: var(--ink);
}
.renvoi p[b-ianzb2227l] { margin: 0; }
.renvoi .rubrique[b-ianzb2227l] { margin-bottom: 0.3rem; }
.renvoi[b-ianzb2227l]  a {
    color: var(--navy);
    text-decoration: underline 1px var(--gold);
    text-underline-offset: 3px;
}
.renvoi[b-ianzb2227l]  a:hover { text-decoration-color: var(--rubrique); }
.conciles-deroulement[b-ianzb2227l] {
    max-width: 72ch;
    font-family: 'Lora', serif;
    font-size: 1.04rem;
    line-height: 1.8;
    color: var(--ink);
    overflow-wrap: break-word;
}
/* Balises héritées (FONT COLOR, SIZE) : couleur et corps du texte courant. */
.conciles-deroulement[b-ianzb2227l]  font {
    color: inherit;
    font-size: inherit;
}
.conciles-deroulement[b-ianzb2227l]  p {
    margin: 0 0 1.15em;
}
.conciles-deroulement[b-ianzb2227l]  h3 {
    margin: 2.6rem 0 1rem;
    padding: 1.6rem 0 0;
    border-top: 1px solid var(--filet);
    font-family: 'Playfair Display', serif;
    font-weight: 400;
    font-size: 1.45rem;
    line-height: 1.3;
    color: var(--navy);
    scroll-margin-top: var(--marge-haute);
}
.conciles-deroulement[b-ianzb2227l]  h3:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}
.conciles-deroulement[b-ianzb2227l]  a,
.texte-courant[b-ianzb2227l]  a:not(.bible-ref),
.pape-texte[b-ianzb2227l]  a:not(.bible-ref) {
    color: var(--navy);
    text-decoration: underline 1px var(--gold);
    text-underline-offset: 3px;
}
.conciles-deroulement[b-ianzb2227l]  a:hover { text-decoration-color: var(--rubrique); }

/* « ↑ Sommaire » : reste au bas de l'écran pendant la lecture du récit, sous 1100 px seulement
   (au-dessus, le sommaire est dans la marge). */
.retour-sommaire[b-ianzb2227l] { display: none; }

/* --- Conciles voisins --- */
.voisins[b-ianzb2227l] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px;
    margin-top: 72px;
    border-top: 1px solid var(--gold);
    border-bottom: 1px solid var(--filet);
}
.voisin[b-ianzb2227l] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 22px 0;
}
.voisin-suiv[b-ianzb2227l] {
    grid-column: 2;
    align-items: flex-end;
    text-align: right;
}
.voisin-sens[b-ianzb2227l] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-soft);
}
.voisin-nom[b-ianzb2227l] {
    font-family: 'Playfair Display', serif;
    font-size: 1.5rem;
    line-height: 1.2;
    color: var(--navy);
    text-decoration: underline 1px transparent;
    text-underline-offset: 5px;
    transition: text-decoration-color 0.2s;
}
.voisin:hover .voisin-nom[b-ianzb2227l],
.voisin:focus-visible .voisin-nom[b-ianzb2227l] { text-decoration-color: var(--gold); }
.voisin-prec:hover .fleche-retour[b-ianzb2227l] { transform: scaleX(-1) translateX(4px); }
.voisin-suiv:hover .fleche[b-ianzb2227l] { transform: translateX(4px); }
.voisin-annee[b-ianzb2227l] {
    font-family: 'Lora', serif;
    font-style: italic;
    font-size: 0.9rem;
    color: var(--ink-soft);
}

/* Version compacte, dans la marge : l'un sous l'autre */
.voisins-marge[b-ianzb2227l] {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    margin-top: 24px;
    border-top: 1px solid var(--filet);
    border-bottom: 0;
}
.voisins-marge .voisin[b-ianzb2227l] { padding: 12px 0 0; }
.voisins-marge .voisin-suiv[b-ianzb2227l] {
    grid-column: 1;
    align-items: flex-start;
    text-align: left;
}
.voisins-marge .voisin-vide[b-ianzb2227l] { display: none; }
.voisins-marge .voisin-sens[b-ianzb2227l] { font-size: 0.7rem; gap: 6px; letter-spacing: 0.1em; }
.voisins-marge .voisin-nom[b-ianzb2227l] { font-size: 1.05rem; }
.voisins-marge .fleche[b-ianzb2227l] { width: 14px; height: 8px; }

/* ============================================================
   TABLETTE (< 1100 px)
   ============================================================ */
@media (max-width: 1099.98px) {
    .epoque[b-ianzb2227l] {
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
    }
    .epoque-tete[b-ianzb2227l] { position: static; }

    .concile-grille[b-ianzb2227l] {
        grid-template-columns: minmax(0, 1fr);
        gap: 48px;
        margin-top: 36px;
    }
    .concile-texte[b-ianzb2227l],
    .concile-marge[b-ianzb2227l] {
        grid-column: 1;
        grid-row: auto;
    }
    .concile-marge[b-ianzb2227l] {
        padding: 0;
        border-left: 0;
    }
    .marge-collante[b-ianzb2227l] {
        position: static;
        max-height: none;
        overflow: visible;
    }
    /* Fiche en ligne, entre deux filets */
    .fiche-concile[b-ianzb2227l] {
        display: grid;
        grid-template-columns: auto auto minmax(0, 1fr);
        gap: 0;
        margin-bottom: 32px;
        border-top: 1px solid var(--gold);
        border-bottom: 1px solid var(--filet);
    }
    .fiche-concile div[b-ianzb2227l],
    .fiche-concile div:first-child[b-ianzb2227l] {
        padding: 12px 24px 12px 0;
        border-bottom: 0;
    }
    .fiche-concile div + div[b-ianzb2227l] {
        padding-left: 24px;
        border-left: 1px solid var(--filet);
    }
    .sommaire > ol[b-ianzb2227l] {
        columns: 2;
        column-gap: 40px;
    }
    .sommaire > ol > li[b-ianzb2227l] { break-inside: avoid; }
    .voisins-marge[b-ianzb2227l] { display: none; }

    .retour-sommaire[b-ianzb2227l] {
        position: sticky;
        bottom: 14px;
        z-index: 2;
        display: flex;
        justify-content: flex-end;
        margin: 28px 0 0;
        pointer-events: none;
    }
    .retour-sommaire a[b-ianzb2227l] {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        min-height: 40px;
        padding: 0 16px 0 14px;
        pointer-events: auto;
        font-family: 'Lato', sans-serif;
        font-weight: 700;
        font-size: 0.7rem;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--ivory);
        background: var(--navy);
        box-shadow: inset 0 0 0 3px var(--navy), inset 0 0 0 4px var(--gold);
    }
    .retour-sommaire .fleche[b-ianzb2227l] { color: var(--gold); width: 16px; }
}

@media (max-width: 899.98px) {
    .ouverture[b-ianzb2227l] {
        grid-template-columns: minmax(0, 1fr);
        gap: 40px;
        padding-bottom: 48px;
    }
    .ouverture-image[b-ianzb2227l] {
        justify-self: center;
        width: 100%;
        max-width: 560px;
    }
}

/* ============================================================
   MOBILE (< 768 px)
   ============================================================ */
@media (max-width: 767.98px) {
    .chapeau[b-ianzb2227l] { font-size: 1.04rem; }
    .concile-tete .chapeau[b-ianzb2227l] { font-size: 1.08rem; }

    .epoques-nav ul[b-ianzb2227l] { grid-template-columns: minmax(0, 1fr); }
    .epoques-nav li + li[b-ianzb2227l] {
        border-left: 0;
        border-top: 1px solid var(--filet);
    }
    .epoques-nav a[b-ianzb2227l],
    .epoques-nav li:first-child a[b-ianzb2227l] {
        flex-direction: row;
        justify-content: space-between;
        align-items: baseline;
        gap: 12px;
        padding: 12px 0;
    }

    .epoque[b-ianzb2227l] { padding-block: 48px; }

    .frise[b-ianzb2227l] {
        --col-annee: 50px;
        --gouttiere: 30px;
    }
    .frise li:first-child[b-ianzb2227l]::before { top: 30px; }
    .frise li:last-child[b-ianzb2227l]::before { height: 30px; }
    .fiche[b-ianzb2227l] { padding: 18px 0; }
    .fiche[b-ianzb2227l]::before { top: 25px; }
    .fiche-annee[b-ianzb2227l] { font-size: 1.15rem; }
    .page-content .fiche-nom[b-ianzb2227l] { font-size: 1.3rem; }
    .fiche-resume[b-ianzb2227l] { font-size: 0.94rem; }

    .fiche-concile[b-ianzb2227l] { grid-template-columns: minmax(0, 1fr); }
    .fiche-concile div[b-ianzb2227l],
    .fiche-concile div:first-child[b-ianzb2227l],
    .fiche-concile div + div[b-ianzb2227l] {
        display: grid;
        grid-template-columns: 64px minmax(0, 1fr);
        align-items: baseline;
        gap: 12px;
        padding: 9px 0;
        border-left: 0;
    }
    .fiche-concile div + div[b-ianzb2227l] { border-top: 1px solid var(--filet); }
    .fiche-concile dd[b-ianzb2227l] { margin: 0; }
    .sommaire > ol[b-ianzb2227l] { columns: 1; }

    .chapitre[b-ianzb2227l] { padding-top: 40px; margin-top: 40px; }
    .texte-courant[b-ianzb2227l],
    .conciles-deroulement[b-ianzb2227l] { font-size: 1rem; line-height: 1.75; }

    .pape[b-ianzb2227l] {
        grid-template-columns: 64px minmax(0, 1fr);
        gap: 16px;
    }
    .pape-medaillon[b-ianzb2227l] {
        width: 64px;
        height: 64px;
        padding: 3px;
    }

    .voisins[b-ianzb2227l] {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
        margin-top: 56px;
    }
    .voisin-suiv[b-ianzb2227l] {
        grid-column: 1;
        border-top: 1px solid var(--filet);
    }
    .voisin[b-ianzb2227l] { padding: 18px 0; }
    .voisin-nom[b-ianzb2227l] { font-size: 1.3rem; }
}

@media (prefers-reduced-motion: reduce) {
    .page-content *[b-ianzb2227l],
    .page-content *[b-ianzb2227l]::before {
        transition: none !important;
    }
}
/* /Components/Pages/Contact.razor.rz.scp.css */
/* ============================================================
   CONTACT — une lettre à l'auteur
   Signature du colophon de l'accueil, formulaire posé sur le vélin,
   miniature du copiste dans un arc cerclé d'or.
   Aucun texte en or : étiquettes en navy, citation en rubrique.
   ============================================================ */

.contact-grille[b-4cpcznuei8] {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 72px;
    align-items: start;
}

/* Liens du texte : navy, soulignés d'or (rubrique au survol). */
.page-content a[b-4cpcznuei8] {
    color: var(--navy);
    text-decoration: underline 1px var(--gold);
    text-underline-offset: 4px;
    transition: text-decoration-color 0.2s;
}
@media (hover: hover) {
    .page-content a:hover[b-4cpcznuei8] { text-decoration-color: var(--rubrique); }
}

/* Bouton dans le fil du texte (préférences de témoins) : il se lit comme les liens qui l'entourent. */
.lien-bouton[b-4cpcznuei8] {
    display: inline;
    margin: 0;
    padding: 0;
    font: inherit;
    color: var(--navy);
    text-align: inherit;
    background: none;
    border: 0;
    text-decoration: underline 1px var(--gold);
    text-underline-offset: 4px;
    cursor: pointer;
    transition: text-decoration-color 0.2s;
}
@media (hover: hover) {
    .lien-bouton:hover[b-4cpcznuei8] { text-decoration-color: var(--rubrique); }
}
.lien-bouton:focus-visible[b-4cpcznuei8] {
    outline: 2px solid var(--navy);
    outline-offset: 3px;
    border-radius: 2px;
}

/* ---------- Signature (même dessin que le colophon) ---------- */
.contact-signature[b-4cpcznuei8] {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 0 16px;
}
.contact-signature img[b-4cpcznuei8] {
    width: 56px;
    height: 56px;
    margin: 0;
    border-radius: 50%;
    border: 1px solid var(--gold);
}
.contact-signature span[b-4cpcznuei8] {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: 1.15rem;
    color: var(--navy);
}

.contact-chapeau[b-4cpcznuei8] {
    margin: 0 0 2.25rem;
    max-width: 50ch;
    font-family: 'Lora', serif;
    font-size: 1.12rem;
    line-height: 1.7;
    color: var(--ink);
}

/* ---------- Formulaire ---------- */
.formulaire-contact[b-4cpcznuei8] {
    max-width: 600px;
}
.champ[b-4cpcznuei8] {
    margin-bottom: 1.6rem;
}
.champ label[b-4cpcznuei8] {
    display: block;
    margin-bottom: 0.55rem;
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    font-size: 0.74rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--navy);
}
/* Le dessin du champ (vélin clair, bord en or foncé, filet d'or intérieur, survol et focus)
   vient de .form-control (app.css), comme la recherche ; ici, la taille seulement. */
.formulaire-contact .form-control[b-4cpcznuei8] {
    display: block;
    width: 100%;
    min-height: 48px;
    padding: 0.7rem 0.95rem;
    font-size: 1.05rem;
    line-height: 1.6;
}

/* Le message s'écrit sur une page réglée, comme une lettre : une ligne par ligne de texte, juste
   sous le pied des lettres, qui suit le texte au défilement. La hauteur de ligne doit rester --ligne. */
.formulaire-contact .champ-reglure[b-4cpcznuei8] {
    --ligne: 1.9rem;
    line-height: var(--ligne);
    padding-top: 0.45rem;
    padding-bottom: 0.45rem;
    /* Deux couches : la réglure (bornée au texte), puis le fond clair du champ entier. */
    background-image:
        linear-gradient(to bottom, transparent calc(var(--ligne) - 1px), rgba(201, 165, 90, 0.5) calc(var(--ligne) - 1px)),
        linear-gradient(var(--ivory), var(--ivory));
    background-size: 100% var(--ligne), auto;
    background-position: 0 -0.38rem, 0 0;
    background-origin: content-box, padding-box;
    background-clip: content-box, padding-box;
    background-attachment: local, local;
    resize: vertical;
}

.bouton-envoyer[b-4cpcznuei8] {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-height: 48px;
    padding: 14px 28px;
}
.bouton-envoyer svg[b-4cpcznuei8] {
    width: 22px;
    height: 11px;
    color: var(--gold);
    transition: transform 0.3s;
}
.bouton-envoyer:hover svg[b-4cpcznuei8] { transform: translateX(4px); }

.avis-confidentialite[b-4cpcznuei8] {
    margin: 1.4rem 0 0;
    max-width: 56ch;
    font-family: 'Lora', serif;
    font-style: italic;
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--ink-soft);
}

/* ---------- Marge : la miniature et le verset ---------- */
.contact-marge[b-4cpcznuei8] {
    display: grid;
    justify-items: center;
    gap: 28px;
}
/* L'image est recadrée au format 4:5 de l'arc : elle n'est jamais agrandie au-delà de 400 px. */
.contact-miniature[b-4cpcznuei8] {
    width: 100%;
    max-width: 400px;
    margin: 0;
    padding: 5px;
    background: var(--ivory);
    border: 3px double var(--gold);
    border-radius: 50% 50% 0 0 / 26% 26% 0 0;
    overflow: hidden;
}
.contact-miniature img[b-4cpcznuei8] {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    margin: 0;
    border-radius: 50% 50% 0 0 / 25% 25% 0 0;
}

.contact-citation[b-4cpcznuei8] {
    max-width: 34ch;
    margin: 0;
    text-align: center;
}
.contact-citation p[b-4cpcznuei8] {
    margin: 0 0 10px;
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: 1.1rem;
    line-height: 1.55;
    color: var(--navy);
    text-wrap: balance;
}
.contact-citation cite[b-4cpcznuei8] {
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 0.72rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--rubrique);
}

/* ---------- Confidentialité : un chapitre comme ceux de l'accueil ---------- */
.contact-confidentialite[b-4cpcznuei8] {
    margin-top: 80px;
    padding-top: 56px;
    border-top: 1px solid var(--filet);
}
.contact-tete[b-4cpcznuei8] {
    margin-bottom: 24px;
}
/* Titre à petite lettrine (h2.lettrine-h2) : règle commune d'app.css. */
.contact-confidentialite > p[b-4cpcznuei8] {
    max-width: 68ch;
    margin: 0;
    font-family: 'Lora', serif;
    font-size: 1.06rem;
    line-height: 1.75;
    color: var(--ink);
}

/* ============================================================
   TABLETTE (768 à 1023 px) : deux colonnes resserrées
   ============================================================ */
@media (max-width: 1023.98px) {
    .contact-grille[b-4cpcznuei8] { gap: 40px; }
    .contact-miniature[b-4cpcznuei8] { max-width: 300px; }
    .contact-citation p[b-4cpcznuei8] { font-size: 1.02rem; }
}

/* ============================================================
   MOBILE (< 768 px) : une seule colonne, le formulaire d'abord
   ============================================================ */
@media (max-width: 767.98px) {
    .contact-grille[b-4cpcznuei8] {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }
    .contact-chapeau[b-4cpcznuei8] {
        margin-bottom: 1.75rem;
        font-size: 1.04rem;
    }
    .bouton-envoyer[b-4cpcznuei8] {
        width: 100%;
        justify-content: center;
    }
    .contact-marge[b-4cpcznuei8] {
        margin-top: 44px;
        padding-top: 40px;
        border-top: 1px solid var(--filet);
    }
    .contact-miniature[b-4cpcznuei8] { max-width: 248px; }
    .contact-confidentialite[b-4cpcznuei8] {
        margin-top: 48px;
        padding-top: 40px;
    }
    .contact-confidentialite > p[b-4cpcznuei8] { font-size: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
    .bouton-envoyer svg[b-4cpcznuei8],
    .page-content a[b-4cpcznuei8],
    .lien-bouton[b-4cpcznuei8] { transition: none; }
}
/* /Components/Pages/Homepage.razor.rz.scp.css */
/* ============================================================
   FOI CATHOLIQUE — Page d'accueil « livre d'heures »
   Un folio de vélin qui s'ouvre sur un « À » d'or posé sur la couleur
   liturgique du jour (--lettrine-fond, injecté inline) et se referme
   sur un Ω. Grammaire unique : rubriques rouges, petites lettrines,
   filet d'or dans la marge.
   Règle : aucun texte en or ni en couleur liturgique sur fond clair
   (contraste) ; le texte coloré est en --rubrique.
   ============================================================ */

.homepage-wrapper[b-tdroulxvs6] {
    --navy: #1a1a4a;
    --gold: #c9a55a;
    --gold-deep: #8a6f2a;
    --ivory: #fdfdf6;
    --ink: #1d1d2e;
    --ink-soft: #4a4a5e;
    --velin: #f5efe0;
    --rubrique: #a8322a;
    --filet: rgba(201, 165, 90, 0.55);
    --lettrine-taille: 208px;
    --marge-filet: 44px;
    --h2-taille: clamp(1.9rem, 3vw, 2.6rem);
    /* --lettrine-fond : injecté inline (couleur du jour) */

    position: relative;
    /* Pleine largeur : annule la gouttière de .container-fluid du layout. */
    margin-inline: calc(-0.5 * var(--bs-gutter-x, 1.5rem));
    overflow-x: clip;
    color: var(--ink);
    background-color: var(--velin);
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.62 0 0 0 0 0.5 0 0 0 0 0.3 0 0 0 0.07 0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23p)'/%3E%3C/svg%3E");
}

.folio[b-tdroulxvs6] {
    max-width: 1240px;
    margin-inline: auto;
    padding: 0 48px 96px 88px;
}

.chapitre[b-tdroulxvs6] {
    position: relative;
    padding-block: 72px;
}
.chapitre + .chapitre[b-tdroulxvs6],
.anchor-offset + .chapitre[b-tdroulxvs6] {
    border-top: 1px solid var(--filet);
}

.anchor-offset[b-tdroulxvs6] {
    display: block;
    height: 0;
}
/* Cibles des liens d'ancre : reçoivent le focus (tabindex=-1, navbar-utils.js) sans contour. */
.anchor-offset:focus[b-tdroulxvs6],
.chapitre:focus[b-tdroulxvs6] {
    outline: none;
}

/* ---------- Typographie commune ---------- */

.rubrique[b-tdroulxvs6] {
    display: block;
    margin: 0 0 0.6rem;
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-weight: 400;
    font-size: 1.02rem;
    line-height: 1.5;
    letter-spacing: 0.01em;
    color: var(--rubrique);
}

/* Titres de section (h2.lettrine-h2, petite lettrine) : règle commune dans app.css ;
   --h2-taille en reprend la taille pour le calcul du filet de la marge. */

.chapeau[b-tdroulxvs6] {
    margin: 1.1rem 0 0;
    max-width: 58ch;
    font-family: 'Lora', serif;
    font-size: 1.08rem;
    line-height: 1.6;
    color: var(--ink-soft);
}

.chapitre h3[b-tdroulxvs6] {
    padding: 0;
}

/* Focus et liens */
.homepage-wrapper a[b-tdroulxvs6] {
    color: var(--navy);
    text-decoration: none;
}
.homepage-wrapper a:focus-visible[b-tdroulxvs6] {
    outline: 2px solid var(--navy);
    outline-offset: 3px;
    border-radius: 2px;
}

.lien-fin svg[b-tdroulxvs6],
.glose-lien svg[b-tdroulxvs6],
.evangile-liens a svg[b-tdroulxvs6],
.auteur-liens a svg[b-tdroulxvs6] {
    width: 20px;
    height: 10px;
    color: var(--gold-deep);
    flex-shrink: 0;
    transition: transform 0.3s;
}

/* ============================================================
   TITRE COURANT
   ============================================================ */
.titre-courant[b-tdroulxvs6] {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: 6px 24px;
    margin: 0;
    padding: 22px 0 12px;
    border-bottom: 1px solid var(--gold);
    font-family: 'Lora', serif;
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--ink-soft);
}
.tc-date[b-tdroulxvs6] { color: var(--ink); }
.tc-droite[b-tdroulxvs6] { text-align: right; }
.tc-sep[b-tdroulxvs6] { margin-inline: 0.35em; }
.tc-fete[b-tdroulxvs6] {
    font-style: italic;
    color: var(--rubrique);
}
.tc-pastille[b-tdroulxvs6] {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 6px;
    vertical-align: -1px;
    background: var(--lettrine-fond);
}
.couleur-blanc .tc-pastille[b-tdroulxvs6] {
    background: #ffffff;
    box-shadow: inset 0 0 0 1px var(--navy);
}

/* ============================================================
   FRONTISPICE
   ============================================================ */
.frontispice[b-tdroulxvs6] {
    padding: 40px 0 64px;
}
.frontispice-grille[b-tdroulxvs6] {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 64px;
    align-items: start;
}

.frontispice-titre[b-tdroulxvs6] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: 28px;
    margin: 12px 0 0;
    padding: 0;
    font-family: 'Playfair Display', serif;
    font-weight: 400;
    font-size: clamp(2.8rem, 5vw, 4.5rem);
    line-height: 1.04;
    color: var(--navy);
}
.titre-texte[b-tdroulxvs6] { display: block; }
.titre-ligne[b-tdroulxvs6] { display: block; }
.titre-mineur[b-tdroulxvs6] {
    font-style: italic;
    font-size: 0.56em;
    line-height: 1.25;
    color: var(--ink-soft);
}
.frontispice-titre em[b-tdroulxvs6] {
    font-style: italic;
    color: var(--rubrique);
}

/* --- Le grand « À » --- */
.lettrine-grande[b-tdroulxvs6] {
    position: relative;
    align-self: start;
    display: grid;
    place-items: center;
    width: var(--lettrine-taille);
    height: var(--lettrine-taille);
    margin: 9px;
    background: var(--lettrine-fond);
    box-shadow: 0 0 0 1px var(--gold), 0 0 0 4px var(--velin), 0 0 0 5px var(--gold);
}
/* Bras vers le filet de la marge : grands écrans seulement (voir plus bas). */
.bras[b-tdroulxvs6] { display: none; }

/* Filigrane blanc tracé à la plume */
.lettrine-grande[b-tdroulxvs6]::after {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.16;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='52'%3E%3Cg fill='none' stroke='%23fff' stroke-width='.8' stroke-linecap='round'%3E%3Cpath d='M6 26c0-8 10-8 10 0s-7 5-7 0'/%3E%3Cpath d='M46 26c0 8-10 8-10 0s7-5 7 0'/%3E%3Cpath d='M26 6c8 0 8 10 0 10s-5-7 0-7'/%3E%3Cpath d='M26 46c-8 0-8-10 0-10s5 7 0 7'/%3E%3C/g%3E%3C/svg%3E");
}
/* Quatre besants d'or aux coins */
.lettrine-grande[b-tdroulxvs6]::before {
    content: "";
    position: absolute;
    inset: -9px;
    pointer-events: none;
    background:
        radial-gradient(circle, var(--gold) 2.6px, transparent 3.2px) 0 0 / 12px 12px no-repeat,
        radial-gradient(circle, var(--gold) 2.6px, transparent 3.2px) 100% 0 / 12px 12px no-repeat,
        radial-gradient(circle, var(--gold) 2.6px, transparent 3.2px) 0 100% / 12px 12px no-repeat,
        radial-gradient(circle, var(--gold) 2.6px, transparent 3.2px) 100% 100% / 12px 12px no-repeat;
}
.lettrine-or[b-tdroulxvs6] {
    position: relative;
    z-index: 1;
    display: block;
    padding-top: 0.14em;
    font-family: 'Playfair Display', serif;
    font-style: normal;
    font-weight: 700;
    font-size: calc(var(--lettrine-taille) * 0.8);
    line-height: 1;
    color: var(--gold);
    background: linear-gradient(115deg, #7a5f22 0%, #c9a55a 35%, #ecd9a0 50%, #c9a55a 65%, #7a5f22 100%) 50% 50% / 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 1px 0 rgba(20, 12, 0, 0.45));
}
/* Reflet : l'or « s'allume » une fois par session (classe posée sur <html>,
   voir App.razor et homepage-enluminure.js). */
html.dorure-attente .lettrine-or[b-tdroulxvs6] { background-position: 15% 50%; }
html.dorure .lettrine-or[b-tdroulxvs6] { transition: background-position 1.6s cubic-bezier(.2, .7, .2, 1); }

@supports not ((background-clip: text) or (-webkit-background-clip: text)) {
    .lettrine-or[b-tdroulxvs6] {
        background: none;
        -webkit-text-fill-color: currentColor;
    }
}
@media (forced-colors: active) {
    .lettrine-or[b-tdroulxvs6] {
        background: none;
        -webkit-text-fill-color: currentColor;
        color: CanvasText;
        filter: none;
    }
}

.frontispice-chapeau[b-tdroulxvs6] {
    margin: 28px 0 32px;
    max-width: 42ch;
    font-family: 'Lora', serif;
    font-size: 1.2rem;
    line-height: 1.6;
    color: var(--ink-soft);
}

.frontispice-actions[b-tdroulxvs6] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 28px;
}
.homepage-wrapper .bouton-principal[b-tdroulxvs6] {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-height: 48px;
    padding: 16px 28px;
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ivory);
    background: var(--navy);
    box-shadow: inset 0 0 0 4px var(--navy), inset 0 0 0 5px var(--gold);
    transition: background-color 0.25s;
}
.homepage-wrapper .bouton-principal:hover[b-tdroulxvs6] { background: #23235c; color: var(--ivory); }
.bouton-principal svg[b-tdroulxvs6] {
    width: 22px;
    height: 11px;
    color: var(--gold);
    transition: transform 0.3s;
}
.bouton-principal:hover svg[b-tdroulxvs6] { transform: translateX(4px); }

.homepage-wrapper .lien-secondaire[b-tdroulxvs6] {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: 1.1rem;
    text-decoration: underline 1px var(--gold);
    text-underline-offset: 5px;
    transition: text-decoration-color 0.2s;
}
.homepage-wrapper .lien-secondaire:hover[b-tdroulxvs6] { text-decoration-color: var(--rubrique); }

.miniature[b-tdroulxvs6] {
    justify-self: end;
    width: 100%;
    max-width: 480px;
    margin: 0;
}
.miniature img[b-tdroulxvs6] {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    padding: 6px;
    background: var(--ivory);
    border: 3px double var(--gold);
}
.miniature figcaption[b-tdroulxvs6] {
    margin-top: 10px;
    font-family: 'Lora', serif;
    font-style: italic;
    font-size: 0.85rem;
    color: var(--ink-soft);
    text-align: right;
}

/* ============================================================
   ÉVANGILE DU JOUR
   ============================================================ */
.evangile-grille[b-tdroulxvs6] {
    display: grid;
    grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
    gap: 64px;
}
.chapitre .evangile-titre[b-tdroulxvs6] {
    font-style: italic;
    font-size: clamp(2rem, 2.9vw, 2.5rem);
    line-height: 1.15;
}
.evangile-intro[b-tdroulxvs6] {
    margin: 1rem 0 0.9rem;
    font-family: 'Lora', serif;
    font-style: italic;
    font-size: 0.95rem;
    color: var(--ink-soft);
}
.evangile-extrait[b-tdroulxvs6] {
    margin: 0;
    max-width: 62ch;
    font-family: 'Lora', serif;
    font-size: 1.15rem;
    line-height: 1.75;
    color: var(--ink);
}
.evangile-liens[b-tdroulxvs6] {
    margin: 1.4rem 0 0;
}
.evangile-liens a[b-tdroulxvs6],
.glose-lien[b-tdroulxvs6],
.lien-fin[b-tdroulxvs6],
.auteur-liens a[b-tdroulxvs6] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--navy);
}
.evangile-liens a:hover svg[b-tdroulxvs6],
.lien-fin:hover svg[b-tdroulxvs6],
.auteur-liens a:hover svg[b-tdroulxvs6],
.glose-carte:hover .glose-lien svg[b-tdroulxvs6] { transform: translateX(4px); }
.mention[b-tdroulxvs6] {
    display: block;
    margin-top: 2px;
    font-family: 'Lato', sans-serif;
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.glose[b-tdroulxvs6] {
    display: grid;
    align-content: start;
    gap: 28px;
    padding-left: 28px;
    border-left: 1px solid var(--gold);
}
.glose-carte[b-tdroulxvs6] {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}
.glose-image[b-tdroulxvs6] {
    display: block;
    width: 96px;
    height: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border: 3px double var(--gold);
    border-radius: 48px 48px 0 0;
    background: var(--ivory);
}
.glose-corps .rubrique[b-tdroulxvs6] { font-size: 0.92rem; margin-bottom: 0.2rem; }
.chapitre .glose-titre[b-tdroulxvs6] {
    margin: 0 0 0.35rem;
    font-family: 'Playfair Display', serif;
    font-weight: 400;
    font-size: 1.15rem;
    line-height: 1.25;
    color: var(--navy);
    text-decoration: underline 1px transparent;
    text-underline-offset: 4px;
    transition: text-decoration-color 0.2s;
}
.glose-carte:hover .glose-titre[b-tdroulxvs6],
.glose-carte:focus-visible .glose-titre[b-tdroulxvs6] { text-decoration-color: var(--gold); }
.glose-extrait[b-tdroulxvs6] {
    display: block;
    font-family: 'Lora', serif;
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--ink-soft);
}
.glose-lien[b-tdroulxvs6] { min-height: 36px; }

/* ============================================================
   PARCOURS GUIDÉ
   ============================================================ */
.chemins[b-tdroulxvs6] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 32px;
    margin: 36px 0 0;
    padding: 0;
    list-style: none;
}
.chemin[b-tdroulxvs6] {
    display: block;
    height: 100%;
}
.chemin-image[b-tdroulxvs6] {
    display: block;
    aspect-ratio: 3 / 4;
    padding: 5px;
    background: var(--ivory);
    border: 3px double var(--gold);
    border-radius: 50% 50% 0 0 / 26% 26% 0 0;
    overflow: hidden;
}
.chemin-image img[b-tdroulxvs6] {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50% 50% 0 0 / 25% 25% 0 0;
}
.chemin-num[b-tdroulxvs6] {
    display: block;
    margin: 18px 0 4px;
    font-family: 'Playfair Display', serif;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--rubrique);
}

/* Prier et approfondir : mêmes cartes que le parcours, en 3 colonnes, images en arc surbaissé. */
.outils[b-tdroulxvs6] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: 44px;
}
.outils .chemin-image[b-tdroulxvs6] {
    aspect-ratio: 4 / 3;
    border-radius: 50% 50% 0 0 / 36% 36% 0 0;
}
.outils .chemin-image img[b-tdroulxvs6] {
    border-radius: 50% 50% 0 0 / 35% 35% 0 0;
}
.chemin-folio[b-tdroulxvs6] {
    display: block;
    margin: 16px 0 2px;
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: 0.98rem;
    line-height: 1.4;
    color: var(--rubrique);
}
.chapitre .chemin h3[b-tdroulxvs6] {
    margin: 0 0 0.4rem;
    font-family: 'Playfair Display', serif;
    font-weight: 400;
    font-size: 1.25rem;
    line-height: 1.25;
    color: var(--navy);
    text-decoration: underline 1px transparent;
    text-underline-offset: 5px;
    transition: text-decoration-color 0.2s;
}
.chemin:hover h3[b-tdroulxvs6],
.chemin:focus-visible h3[b-tdroulxvs6] { text-decoration-color: var(--gold); }
.chemin-desc[b-tdroulxvs6] {
    display: block;
    font-family: 'Lora', serif;
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--ink-soft);
}

/* ============================================================
   DERNIERS ARTICLES : la une à gauche, les cinq suivants à droite
   ============================================================ */
.derniers-grille[b-tdroulxvs6] {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 64px;
    margin-top: 32px;
}
.derniers-une > a[b-tdroulxvs6] { display: block; }
.une-image[b-tdroulxvs6] {
    display: block;
    aspect-ratio: 16 / 10;
    padding: 5px;
    background: var(--ivory);
    border: 3px double var(--gold);
}
.une-image img[b-tdroulxvs6] {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.chapitre .derniers-une h3[b-tdroulxvs6] {
    margin: 18px 0 8px;
    font-family: 'Playfair Display', serif;
    font-weight: 400;
    font-size: 1.55rem;
    line-height: 1.25;
    color: var(--navy);
    text-decoration: underline 1px transparent;
    text-underline-offset: 5px;
    transition: text-decoration-color 0.2s;
}
.derniers-une a:hover h3[b-tdroulxvs6],
.derniers-une a:focus-visible h3[b-tdroulxvs6] { text-decoration-color: var(--gold); }
.une-extrait[b-tdroulxvs6] {
    display: block;
    font-family: 'Lora', serif;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--ink-soft);
}

.derniers-suite[b-tdroulxvs6] {
    margin: 0 0 8px;
    padding: 0;
    list-style: none;
}
.derniers-suite li[b-tdroulxvs6] { border-top: 1px solid var(--filet); }
.derniers-suite li:last-child[b-tdroulxvs6] { border-bottom: 1px solid var(--filet); }
.derniers-suite a[b-tdroulxvs6] {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    align-items: center;
    gap: 16px;
    min-height: 64px;
    padding: 12px 0;
}
.derniers-suite img[b-tdroulxvs6] {
    display: block;
    width: 64px;
    height: 64px;
    object-fit: cover;
    border: 1px solid var(--gold);
}
.suite-titre[b-tdroulxvs6] {
    font-family: 'Playfair Display', serif;
    font-size: 1.05rem;
    line-height: 1.3;
    text-decoration: underline 1px transparent;
    text-underline-offset: 4px;
    transition: text-decoration-color 0.2s;
}
.derniers-suite a:hover .suite-titre[b-tdroulxvs6] { text-decoration-color: var(--gold); }

/* Cibles tactiles de 44 px sans changer la mise en page (« Ce jour-là »). */
.annees a[b-tdroulxvs6] {
    display: block;
    padding-block: 11px;
    margin-block: -11px;
}

/* ============================================================
   TABLE DES MATIÈRES
   ============================================================ */
/* Médaillons ronds cerclés d'or, comme les oculi d'une rosace : une rangée de sept sur ordinateur. */
.medaillons[b-tdroulxvs6] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 36px 24px;
    margin: 40px 0 0;
    padding: 0;
    list-style: none;
}
.medaillons li[b-tdroulxvs6] {
    flex: 0 0 136px;
}
.medaillon[b-tdroulxvs6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.medaillon-image[b-tdroulxvs6] {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    padding: 5px;
    background: var(--ivory);
    border: 3px double var(--gold);
    border-radius: 50%;
    overflow: hidden;
    transition: border-color 0.25s;
}
.medaillon-image img[b-tdroulxvs6] {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    transition: transform 0.6s cubic-bezier(.2, .7, .2, 1);
}
.medaillon:hover .medaillon-image img[b-tdroulxvs6],
.medaillon:focus-visible .medaillon-image img[b-tdroulxvs6] { transform: scale(1.06); }
.medaillon:hover .medaillon-image[b-tdroulxvs6],
.medaillon:focus-visible .medaillon-image[b-tdroulxvs6] { border-color: var(--rubrique); }
.medaillon-nom[b-tdroulxvs6] {
    margin-top: 14px;
    font-family: 'Playfair Display', serif;
    font-size: 1.15rem;
    line-height: 1.25;
    color: var(--navy);
    text-decoration: underline 1px transparent;
    text-underline-offset: 4px;
    transition: text-decoration-color 0.2s;
}
.medaillon:hover .medaillon-nom[b-tdroulxvs6],
.medaillon:focus-visible .medaillon-nom[b-tdroulxvs6] { text-decoration-color: var(--gold); }
.medaillon-compte[b-tdroulxvs6] {
    margin-top: 2px;
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: 0.92rem;
    color: var(--rubrique);
}

/* ============================================================
   COLOPHON ET Ω
   ============================================================ */
.colophon[b-tdroulxvs6] {
    padding-bottom: 24px;
}
.colophon-grille[b-tdroulxvs6] {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 64px;
    margin-top: 32px;
}
.auteur-note[b-tdroulxvs6] {
    margin: 0;
    max-width: 58ch;
    font-family: 'Lora', serif;
    font-size: 1.08rem;
    line-height: 1.75;
    color: var(--ink);
}
.homepage-wrapper .auteur-note a[b-tdroulxvs6] {
    font-style: italic;
    text-decoration: underline 1px var(--gold);
    text-underline-offset: 4px;
}
.homepage-wrapper .auteur-note a:hover[b-tdroulxvs6] { text-decoration-color: var(--rubrique); }
.auteur-signature[b-tdroulxvs6] {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 0 14px;
}
.auteur-signature img[b-tdroulxvs6] {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 1px solid var(--gold);
}
.auteur-signature span[b-tdroulxvs6] {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: 1.15rem;
    color: var(--navy);
}
.auteur-liens[b-tdroulxvs6] {
    display: flex;
    flex-wrap: wrap;
    gap: 0 28px;
    margin: 12px 0 0;
}

.ce-jour-la[b-tdroulxvs6] {
    padding-left: 28px;
    border-left: 1px solid var(--gold);
}
.chapitre .ce-jour-la h3[b-tdroulxvs6] {
    margin: 0 0 6px;
    font-family: 'Playfair Display', serif;
    font-weight: 400;
    font-size: 1.5rem;
    color: var(--navy);
}
.annees[b-tdroulxvs6] {
    margin: 0;
    padding: 0;
    list-style: none;
}
.annees li[b-tdroulxvs6] {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    align-items: baseline;
    column-gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid var(--filet);
}
.annee[b-tdroulxvs6] {
    font-family: 'Playfair Display', serif;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--rubrique);
}
.annees a[b-tdroulxvs6] {
    font-family: 'Playfair Display', serif;
    font-size: 1.08rem;
    line-height: 1.3;
    text-decoration: underline 1px transparent;
    text-underline-offset: 4px;
    transition: text-decoration-color 0.2s;
}
.annees a:hover[b-tdroulxvs6] { text-decoration-color: var(--gold); }

.omega[b-tdroulxvs6] {
    margin-top: 80px;
    text-align: center;
}
.omega-glyphe[b-tdroulxvs6] {
    display: block;
    width: 72px;
    height: 72px;
    margin: 0 auto 16px;
    filter: drop-shadow(0 1px 0 rgba(20, 12, 0, 0.35));
}
.omega-citation[b-tdroulxvs6] {
    margin: 0;
}
.omega-citation p[b-tdroulxvs6] {
    max-width: 34ch;
    margin: 0 auto 10px;
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: 1.25rem;
    line-height: 1.5;
    color: var(--navy);
}
.omega-citation cite[b-tdroulxvs6] {
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 0.72rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--rubrique);
}

/* ============================================================
   FILET D'OR DE LA MARGE (grands écrans)
   Une ligne continue relie le grand « À » au colophon ; un bras
   terminé par un losange la rattache à chaque lettrine.
   ============================================================ */
@media (min-width: 1100px) {
    .chapitre[b-tdroulxvs6]::before {
        content: "";
        position: absolute;
        left: calc(-1 * var(--marge-filet));
        top: 0;
        bottom: 0;
        width: 1px;
        background: var(--gold);
        opacity: 0.7;
        pointer-events: none;
    }
    /* Départ au centre du grand « À » : marge haute + rubrique + marge du h1 + marge de la lettrine. */
    /* Les marges de la rubrique (0.6rem) et du h1 (12px) fusionnent : seule la plus grande compte. */
    .frontispice[b-tdroulxvs6]::before {
        top: calc(40px + 1.02rem * 1.5 + 12px + 9px + var(--lettrine-taille) / 2);
    }
    /* Remonte sur la bordure haute de la section : la ligne reste continue. */
    .chapitre + .chapitre[b-tdroulxvs6]::before,
    .anchor-offset + .chapitre[b-tdroulxvs6]::before {
        top: -1px;
    }
    /* Arrivée au bras du dernier titre. */
    .colophon[b-tdroulxvs6]::before {
        bottom: auto;
        height: calc(1px + 72px + 1.02rem * 1.5 + 0.6rem + 0.2em + var(--h2-taille) * 0.7);
    }

    /* Corps plafonné en px, comme la colonne (folio et lettrine en px) : le titre tient
       même avec une police par défaut agrandie dans le navigateur. */
    .frontispice-titre[b-tdroulxvs6] { font-size: clamp(min(2.8rem, 55px), 5vw, 72px); }
    .titre-ligne[b-tdroulxvs6] { white-space: nowrap; }

    .bras[b-tdroulxvs6],
    .chapitre .lettrine-h2[b-tdroulxvs6]::after {
        content: "";
        position: absolute;
        height: 9px;
        pointer-events: none;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='9'%3E%3Cpath d='M4.5 0.5 8.5 4.5 4.5 8.5 0.5 4.5Z' fill='%23c9a55a'/%3E%3Cpath d='M8 4.5H200' stroke='%23c9a55a' stroke-width='1'/%3E%3C/svg%3E") left center / auto 9px no-repeat;
    }
    .bras[b-tdroulxvs6] {
        display: block;
        left: calc(-1 * var(--marge-filet) - 9px - 4.5px);
        width: calc(var(--marge-filet) + 4.5px + 4px);   /* jusqu'à l'anneau d'or extérieur */
        top: calc(50% - 4.5px);
    }
    .chapitre .lettrine-h2[b-tdroulxvs6] { position: relative; }
    .chapitre .lettrine-h2[b-tdroulxvs6]::after {
        left: calc(-1 * var(--marge-filet) - 4.5px);
        width: calc(var(--marge-filet) + 4.5px);
        top: calc(0.7em + 3px - 4.5px);
    }
}

/* ============================================================
   TABLETTE (768–1099 px)
   ============================================================ */
@media (max-width: 1099.98px) {
    .homepage-wrapper[b-tdroulxvs6] { --lettrine-taille: 160px; }
    .folio[b-tdroulxvs6] { padding: 0 32px 72px; }
    .frontispice-grille[b-tdroulxvs6] { grid-template-columns: minmax(0, 1fr); gap: 40px; }
    .miniature[b-tdroulxvs6] { justify-self: center; max-width: 560px; }
    /* 4/3 calé en bas : on garde le visage nimbé ET la corbeille des pains. */
    .miniature img[b-tdroulxvs6] { aspect-ratio: 4 / 3; object-position: 50% 90%; }
    .miniature figcaption[b-tdroulxvs6] { text-align: center; }
    .evangile-grille[b-tdroulxvs6],
    .derniers-grille[b-tdroulxvs6],
    .colophon-grille[b-tdroulxvs6] { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .glose[b-tdroulxvs6],
    .ce-jour-la[b-tdroulxvs6] {
        margin-top: 40px;
        padding: 28px 0 0;
        border-left: none;
        border-top: 1px solid var(--gold);
    }
    .glose[b-tdroulxvs6] { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
    .derniers-liste[b-tdroulxvs6] { margin-top: 28px; }
    .chemins[b-tdroulxvs6] { gap: 20px; }
}

/* Parcours en liste (vignette et texte) sous 900 px : les vignettes 3/4 seraient démesurées. */
@media (max-width: 899.98px) {
    .chemins[b-tdroulxvs6] { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 24px; }
    .chemins li[b-tdroulxvs6] { border-bottom: 1px solid var(--filet); }
    .chemin[b-tdroulxvs6] {
        display: grid;
        grid-template-columns: 96px minmax(0, 1fr);
        gap: 20px;
        align-items: center;
        padding: 14px 0;
    }
    .chemin-image[b-tdroulxvs6] { padding: 3px; aspect-ratio: 4 / 5; }
    .chemin-num[b-tdroulxvs6] { display: inline; margin: 0 0.35em 0 0; font-size: 1.1rem; }
    .chapitre .chemin h3[b-tdroulxvs6] { display: inline; font-size: 1.15rem; }
    .chemin-desc[b-tdroulxvs6] { margin-top: 4px; }
    .outils .chemin-image[b-tdroulxvs6] { aspect-ratio: 4 / 5; }
    .chemin-folio[b-tdroulxvs6] { margin: 0 0 2px; font-size: 0.9rem; }
}

/* ============================================================
   MOBILE (< 768 px)
   ============================================================ */
@media (max-width: 767.98px) {
    .homepage-wrapper[b-tdroulxvs6] { --lettrine-taille: 96px; }
    .folio[b-tdroulxvs6] { padding: 0 16px 56px; }
    .chapitre[b-tdroulxvs6] { padding-block: 48px; }
    .frontispice[b-tdroulxvs6] { padding: 28px 0 40px; }

    .titre-courant[b-tdroulxvs6] {
        justify-content: center;
        padding-top: 16px;
        text-align: center;
    }
    .tc-droite[b-tdroulxvs6] { text-align: center; }

    .frontispice-titre[b-tdroulxvs6] {
        column-gap: 14px;
        margin-top: 8px;
        font-size: clamp(1.9rem, 10.5vw, 2.15rem);
        line-height: 1.06;
    }
    .lettrine-grande[b-tdroulxvs6] {
        margin: 6px;
        box-shadow: 0 0 0 1px var(--gold), 0 0 0 3px var(--velin), 0 0 0 4px var(--gold);
    }
    .lettrine-grande[b-tdroulxvs6]::before {
        inset: -7px;
        background:
            radial-gradient(circle, var(--gold) 1.8px, transparent 2.3px) 0 0 / 8px 8px no-repeat,
            radial-gradient(circle, var(--gold) 1.8px, transparent 2.3px) 100% 0 / 8px 8px no-repeat,
            radial-gradient(circle, var(--gold) 1.8px, transparent 2.3px) 0 100% / 8px 8px no-repeat,
            radial-gradient(circle, var(--gold) 1.8px, transparent 2.3px) 100% 100% / 8px 8px no-repeat;
    }
    .titre-mineur[b-tdroulxvs6] { font-size: 0.6em; }

    .frontispice-chapeau[b-tdroulxvs6] { margin: 20px 0 24px; font-size: 1.02rem; }
    .frontispice-actions[b-tdroulxvs6] { flex-direction: column; align-items: stretch; gap: 8px; }
    .homepage-wrapper .bouton-principal[b-tdroulxvs6] { justify-content: center; }
    .homepage-wrapper .lien-secondaire[b-tdroulxvs6] {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 44px;
    }

    .chapitre .evangile-titre[b-tdroulxvs6] { font-size: 1.7rem; }
    .evangile-extrait[b-tdroulxvs6] { font-size: 1.05rem; }
    .glose[b-tdroulxvs6] { grid-template-columns: minmax(0, 1fr); }

    .chemin[b-tdroulxvs6] { grid-template-columns: 76px minmax(0, 1fr); gap: 16px; }
    .chapitre .chemin h3[b-tdroulxvs6] { font-size: 1.1rem; }
    .chemin-desc[b-tdroulxvs6] { font-size: 0.9rem; }

    .chapitre .derniers-une h3[b-tdroulxvs6] { font-size: 1.3rem; }
    .medaillons[b-tdroulxvs6] { gap: 28px 16px; margin-top: 28px; }
    .medaillons li[b-tdroulxvs6] { flex-basis: 96px; }
    .medaillon-nom[b-tdroulxvs6] { margin-top: 10px; font-size: 1rem; }
    .medaillon-compte[b-tdroulxvs6] { font-size: 0.85rem; }
    .annees li[b-tdroulxvs6] { grid-template-columns: 60px minmax(0, 1fr); }
    .annee[b-tdroulxvs6] { font-size: 1.3rem; }
    .omega[b-tdroulxvs6] { margin-top: 56px; }
    .omega-glyphe[b-tdroulxvs6] { width: 56px; height: 56px; }
    .omega-citation p[b-tdroulxvs6] { font-size: 1.1rem; }
}

@media (prefers-reduced-motion: reduce) {
    .homepage-wrapper *[b-tdroulxvs6],
    .homepage-wrapper *[b-tdroulxvs6]::before,
    .homepage-wrapper *[b-tdroulxvs6]::after {
        transition: none !important;
        animation: none !important;
    }
}
/* /Components/Pages/KeywordPage.razor.rz.scp.css */
/* ============================================================
   PAGE MOT-CLÉ / RÉCENTS — un chapitre de la table des matières
   L'article à la une et les cinq suivants, comme les « Derniers
   articles » de l'accueil, puis les autres en vignettes au double
   filet d'or. Aucun texte en or : dates en encre douce.
   ============================================================ */

.mot-cle a[b-h564h0s3zd] {
    color: var(--navy);
    text-decoration: none;
}

.mot-cle-chapeau[b-h564h0s3zd] {
    margin: 0;
    max-width: 58ch;
    font-family: 'Lora', serif;
    font-size: 1.08rem;
    line-height: 1.6;
    color: var(--ink-soft);
}
.mot-cle-liens[b-h564h0s3zd] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.75rem;
    margin-top: 1.5rem;
}
.mot-cle .mot-cle-liens a[b-h564h0s3zd] {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    text-decoration: underline 1px var(--gold);
    text-underline-offset: 5px;
}
.mot-cle .mot-cle-liens a:hover[b-h564h0s3zd] { text-decoration-color: var(--rubrique); }
.mot-cle-themes[b-h564h0s3zd] {
    padding: 0;
    list-style: none;
    font-size: 1.08rem;
}

/* Date, sous le titre : petites capitales espacées, comme les mentions de l'accueil. */
.carte-date[b-h564h0s3zd] {
    display: block;
    margin-top: 4px;
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    font-size: 0.68rem;
    line-height: 1.5;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-soft);
}
/* « 1er » : l'ordinal en exposant et en minuscules, malgré les capitales. */
.ordinal[b-h564h0s3zd] {
    font-size: 0.85em;
    line-height: 0;
    letter-spacing: 0.04em;
    text-transform: none;
    vertical-align: 0.45em;
}

/* Titres des articles : soulignés d'or au survol. */
.une h2[b-h564h0s3zd],
.suite h2[b-h564h0s3zd],
.carte h2[b-h564h0s3zd] {
    margin: 0;
    padding: 0;
    font-family: 'Playfair Display', serif;
    font-weight: 400;
    color: var(--navy);
    text-wrap: pretty;             /* pas de mot seul en dernière ligne */
    text-decoration: underline 1px transparent;
    text-underline-offset: 5px;
    transition: text-decoration-color 0.2s;
}
.une a:hover h2[b-h564h0s3zd],
.une a:focus-visible h2[b-h564h0s3zd],
.suite a:hover h2[b-h564h0s3zd],
.suite a:focus-visible h2[b-h564h0s3zd],
.carte:hover h2[b-h564h0s3zd],
.carte:focus-visible h2[b-h564h0s3zd] { text-decoration-color: var(--gold); }

/* ---------- La une et les cinq suivants ---------- */
.derniers-grille[b-h564h0s3zd] {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 64px;
}
.une > a[b-h564h0s3zd] { display: block; }
.une-image[b-h564h0s3zd],
.carte-image[b-h564h0s3zd] {
    display: block;
    aspect-ratio: 16 / 10;
    padding: 5px;
    background: var(--ivory);
    border: 3px double var(--gold);
}
.une-image img[b-h564h0s3zd],
.carte-image img[b-h564h0s3zd] {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    object-fit: cover;
    border-radius: 0;
}
.une h2[b-h564h0s3zd] {
    margin: 18px 0 0;
    font-size: 1.55rem;
    line-height: 1.25;
}
.une-extrait[b-h564h0s3zd] {
    display: block;
    margin-top: 8px;
    font-family: 'Lora', serif;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--ink-soft);
}

.suite[b-h564h0s3zd] {
    margin: 0;
    padding: 0;
    list-style: none;
}
.suite li[b-h564h0s3zd] { border-top: 1px solid var(--filet); }
.suite li:last-child[b-h564h0s3zd] { border-bottom: 1px solid var(--filet); }
.suite a[b-h564h0s3zd] {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    align-items: center;
    gap: 16px;
    min-height: 64px;
    padding: 12px 0;
}
.suite img[b-h564h0s3zd] {
    display: block;
    width: 64px;
    height: 64px;
    margin: 0;
    object-fit: cover;
    border: 1px solid var(--gold);
    border-radius: 0;
}
.suite h2[b-h564h0s3zd] {
    font-size: 1.05rem;
    line-height: 1.3;
}

/* ---------- Les autres : vignettes encadrées ---------- */
.grille[b-h564h0s3zd] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 48px 32px;
    margin: 64px 0 0;
    padding: 56px 0 0;
    border-top: 1px solid var(--filet);
    list-style: none;
}
.carte[b-h564h0s3zd] {
    display: block;
    height: 100%;
}
.carte-texte[b-h564h0s3zd] { padding-top: 16px; }
.carte h2[b-h564h0s3zd] {
    margin: 0;
    font-size: 1.2rem;
    line-height: 1.28;
}
.carte-extrait[b-h564h0s3zd] {
    display: block;
    margin-top: 0.45rem;
    font-family: 'Lora', serif;
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--ink-soft);
}
/* Premier article ajouté par « Afficher plus » : il reçoit le focus (tabindex=-1).
   Contour au clavier seulement ; sélecteur assez précis pour passer devant une règle commune des cibles d'ancre. */
.grille > li:focus[b-h564h0s3zd] { outline: none; }
.grille > li:focus-visible[b-h564h0s3zd] {
    outline: 2px solid var(--navy);
    outline-offset: 3px;
}

/* ---------- Afficher plus ---------- */
.load-more[b-h564h0s3zd] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.9rem;
    margin-top: 3.5rem;
    padding-top: 2.5rem;
    border-top: 1px solid var(--filet);
}
.load-more .btn[b-h564h0s3zd] { min-height: 48px; padding: 0.8rem 2.2rem; }
.load-more-compte[b-h564h0s3zd] {
    margin: 0;
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: 0.95rem;
    color: var(--ink-soft);
}

/* ---------- Tablette : la une et la suite côte à côte, à parts égales ---------- */
@media (max-width: 1099.98px) {
    .derniers-grille[b-h564h0s3zd] {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 32px;
    }
    .une h2[b-h564h0s3zd] { font-size: 1.35rem; }
    .une-extrait[b-h564h0s3zd] { font-size: 0.95rem; }
    .suite h2[b-h564h0s3zd] { font-size: 1rem; }
    .grille[b-h564h0s3zd] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin-top: 56px;
        padding-top: 48px;
    }
}

/* ---------- Téléphone : la une, puis une seule liste à vignettes (suite et grille) ---------- */
@media (max-width: 767.98px) {
    .derniers-grille[b-h564h0s3zd] {
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
    }
    .une h2[b-h564h0s3zd] { font-size: 1.3rem; }
    .grille[b-h564h0s3zd] {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
        margin-top: 0;
        padding-top: 0;
        border-top: 0;
    }
    .grille li[b-h564h0s3zd] { border-bottom: 1px solid var(--filet); }
    /* Mêmes lignes que la suite (et que les « Derniers articles » de l'accueil) : vignette de 64 px
       à filet simple, centrée sur le titre puis la date ; pas d'extrait, que la suite n'a pas. */
    .carte[b-h564h0s3zd] {
        display: grid;
        grid-template-columns: 64px minmax(0, 1fr);
        gap: 16px;
        align-items: center;
        padding: 12px 0;
    }
    .carte-image[b-h564h0s3zd] {
        aspect-ratio: 1 / 1;
        padding: 0;
        background: none;
        border: 1px solid var(--gold);
    }
    .carte-texte[b-h564h0s3zd] { padding-top: 0; }
    .carte h2[b-h564h0s3zd] { font-size: 1.05rem; line-height: 1.3; }
    .carte-extrait[b-h564h0s3zd] { display: none; }
    .load-more[b-h564h0s3zd] { margin-top: 2.5rem; padding-top: 2rem; border-top: 0; }
    .load-more .btn[b-h564h0s3zd] { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .mot-cle *[b-h564h0s3zd] { transition: none !important; }
}
/* /Components/Pages/Liturgie.razor.rz.scp.css */
/* ============================================================
   CALENDRIER LITURGIQUE — un folio de lectionnaire
   Même grammaire que l'accueil : titre courant, rubriques rouges,
   lettrines d'or sur la couleur liturgique du jour AFFICHÉ
   (--lettrine-fond, posée inline sur .liturgie), filets d'or.
   Chaque partie : rubrique à gauche, référence et actions dans
   la marge à droite (sous la rubrique sur petit écran).
   Les textes de l'AELF (HTML injecté) sont stylés via ::deep.
   Règle : aucun texte en or ni en couleur liturgique sur fond
   clair ; le texte coloré est en --rubrique.
   ============================================================ */

.liturgie[b-1g7bp0fupd] {
    --marge: 196px;
}

/* ============================================================
   TITRE COURANT (même dessin que l'accueil)
   ============================================================ */
.titre-courant[b-1g7bp0fupd] {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: 6px 24px;
    margin: -34px 0 52px;
    padding: 0 0 12px;
    border-bottom: 1px solid var(--gold);
    font-family: 'Lora', serif;
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--ink-soft);
}
.tc-date[b-1g7bp0fupd] { color: var(--ink); }
.tc-droite[b-1g7bp0fupd] { text-align: right; }
.tc-sep[b-1g7bp0fupd] { margin-inline: 0.35em; }
.tc-degre[b-1g7bp0fupd],
.tc-couleur[b-1g7bp0fupd] { white-space: nowrap; }
.tc-fete[b-1g7bp0fupd] {
    font-style: italic;
    color: var(--rubrique);
}
/* « 27e » : l'ordinal en exposant (titre courant, désignation). */
.ordinal[b-1g7bp0fupd] {
    position: static;
    margin-left: 0.04em;
    font-size: 0.68em;
    line-height: 0;
    vertical-align: 0.42em;
}
.tc-pastille[b-1g7bp0fupd] {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 6px;
    vertical-align: -1px;
    background: var(--lettrine-fond);
}
.couleur-blanc .tc-pastille[b-1g7bp0fupd] {
    background: #ffffff;
    box-shadow: inset 0 0 0 1px var(--navy);
}

/* ============================================================
   EN-TÊTE : titre, désignation du jour, choix du jour, vignette
   ============================================================ */
.tete[b-1g7bp0fupd] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 64px;
    align-items: start;
}
.tete h1[b-1g7bp0fupd] {
    margin-bottom: 1.1rem;
}
.tete-designation[b-1g7bp0fupd] {
    margin: 0 0 0.5rem;
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: 1.3rem;
    line-height: 1.4;
    color: var(--navy);
    text-wrap: balance;
}
.tete-chapeau[b-1g7bp0fupd] {
    margin: 0;
    max-width: 56ch;
    font-family: 'Lora', serif;
    font-size: 1.02rem;
    line-height: 1.6;
    color: var(--ink-soft);
}

.tete-vignette[b-1g7bp0fupd] {
    margin: 4px 0 0;
}
.tete-vignette img[b-1g7bp0fupd] {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    margin: 0;
    padding: 5px;
    background: var(--ivory);
    border: 3px double var(--gold);
    border-radius: 50% 50% 0 0 / 36% 36% 0 0;
}
.tete-vignette figcaption[b-1g7bp0fupd] {
    margin-top: 8px;
    font-family: 'Lora', serif;
    font-style: italic;
    font-size: 0.85rem;
    color: var(--ink-soft);
    text-align: right;
}

/* --- Choix du jour --- */
.choix-jour[b-1g7bp0fupd] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 28px;
}
.choix-etiquette[b-1g7bp0fupd] {
    margin-right: 6px;
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    font-size: 0.7rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-soft);
}
.bouton-filet[b-1g7bp0fupd] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 44px;
    min-height: 44px;
    padding: 0 18px;
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--navy);
    background: transparent;
    border: 1px solid var(--gold);
    border-radius: 0;
    transition: background-color 0.2s;
}
.bouton-filet:hover[b-1g7bp0fupd] { background: rgba(201, 165, 90, 0.16); }
.bouton-fleche[b-1g7bp0fupd] {
    padding: 0;
    font-size: 0.95rem;
}
/* Même champ que .form-control (app.css) : bord en or foncé, filet d'or intérieur, navy au survol et au focus. */
.choix-date[b-1g7bp0fupd]  input {
    width: 10.5rem;
    min-height: 44px;
    padding: 0 12px;
    font-family: 'Lora', serif;
    font-size: 1rem;
    color: var(--ink);
    background: var(--ivory);
    border: 1px solid var(--gold-deep);
    border-radius: 0;
    box-shadow: inset 0 0 0 3px var(--ivory), inset 0 0 0 4px var(--filet);
    transition: border-color 0.2s;
}
@media (hover: hover) {
    .choix-date[b-1g7bp0fupd]  input:hover { border-color: var(--navy); }
}
.choix-date[b-1g7bp0fupd]  input:focus {
    border-color: var(--navy);
    outline: 2px solid var(--navy);
    outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
    .choix-date[b-1g7bp0fupd]  input { transition: none; }
}

/* ============================================================
   MESSE ET HEURES DE L'OFFICE
   ============================================================ */
.heures[b-1g7bp0fupd] {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    margin: 56px 0 0;
    border-top: 1px solid var(--gold);
    border-bottom: 1px solid var(--gold);
}
.heures-etiquette[b-1g7bp0fupd] {
    display: flex;
    align-items: center;
    margin-left: 10px;
    padding: 0 6px 0 24px;
    border-left: 1px solid var(--filet);
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    font-size: 0.66rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-soft);
}
.heures-liste[b-1g7bp0fupd] {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    list-style: none;
}
.heure[b-1g7bp0fupd] {
    position: relative;
    min-height: 54px;
    padding: 10px 14px;
    font-family: 'Playfair Display', serif;
    font-size: 1.1rem;
    line-height: 1.2;
    color: var(--navy);
    background: none;
    border: 0;
    text-decoration: underline 1px transparent;
    text-underline-offset: 5px;
    transition: text-decoration-color 0.2s;
}
.heure:hover[b-1g7bp0fupd] { text-decoration-color: var(--gold); }
/* Largeur réservée pour l'autre graphie (italique pour l'heure choisie, romain sinon) :
   la barre ne bouge pas d'un onglet à l'autre. */
.heure[b-1g7bp0fupd]::before {
    content: attr(data-label);
    display: block;
    height: 0;
    overflow: hidden;
    visibility: hidden;
    font-style: italic;
}
.heure.active[b-1g7bp0fupd]::before { font-style: normal; }
.heure.active[b-1g7bp0fupd] {
    font-style: italic;
    color: var(--rubrique);
}
/* Losange d'or posé sur le filet, sous l'heure choisie */
.heure.active[b-1g7bp0fupd]::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -5px;
    width: 9px;
    height: 9px;
    background: var(--gold);
    box-shadow: 0 0 0 2px var(--velin);
    transform: translateX(-50%) rotate(45deg);
}

/* Boutons, liens et cibles d'ancre : focus visible */
.liturgie button:focus-visible[b-1g7bp0fupd],
.liturgie a:focus-visible[b-1g7bp0fupd] {
    outline: 2px solid var(--navy);
    outline-offset: 3px;
    border-radius: 2px;
}

/* ============================================================
   VUE : la messe ou l'office choisi
   ============================================================ */
.vue[b-1g7bp0fupd] {
    margin-top: 56px;
}
.vue-tete[b-1g7bp0fupd] {
    padding-bottom: 32px;
}

/* Choix de la célébration (Noël, vigiles, Jeudi saint…) */
.choix-messe[b-1g7bp0fupd] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 6px 0 28px;
    padding: 0;
    list-style: none;
}
.bouton-messe[b-1g7bp0fupd] {
    min-height: 44px;
    padding: 8px 18px;
    font-family: 'Playfair Display', serif;
    font-size: 1rem;
    line-height: 1.3;
    text-align: left;
    color: var(--navy);
    background: transparent;
    border: 1px solid var(--gold);
    border-radius: 0;
    transition: background-color 0.2s;
}
.bouton-messe:hover[b-1g7bp0fupd] { background: rgba(201, 165, 90, 0.16); }
.bouton-messe.active[b-1g7bp0fupd] {
    color: var(--ivory);
    background: var(--navy);
    border-color: var(--navy);
    box-shadow: inset 0 0 0 3px var(--navy), inset 0 0 0 4px var(--gold);
}

/* Titre de la messe ou de l'heure (h2.vue-titre.lettrine-h2) : petite lettrine, règle commune d'app.css. */

/* Sommaire en ligne : les parties de la messe ou de l'office */
.sommaire[b-1g7bp0fupd] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 14px;
    margin-top: 22px;
    max-width: calc(100% - var(--marge) - 56px);
}
.sommaire-etiquette[b-1g7bp0fupd] {
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    font-size: 0.66rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-soft);
}
.sommaire ol[b-1g7bp0fupd] {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    list-style: none;
}
/* Séparateur en fin d'élément : une ligne renvoyée ne commence jamais par un point. */
.sommaire li:not(:last-child)[b-1g7bp0fupd]::after {
    content: "·" / "";
    margin: 0 0.45em;
    color: var(--ink-soft);
}
.sommaire a[b-1g7bp0fupd] {
    display: inline-block;
    padding-block: 4px;
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: 1rem;
    color: var(--navy);
    text-decoration: underline 1px transparent;
    text-underline-offset: 4px;
    transition: text-decoration-color 0.2s;
}
.sommaire a:hover[b-1g7bp0fupd] { text-decoration-color: var(--gold); }

/* ============================================================
   PARTIES : lectures, psaumes, hymnes, oraisons…
   ============================================================ */
.partie[b-1g7bp0fupd] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--marge);
    column-gap: 56px;
    padding: 40px 0 44px;
    border-top: 1px solid var(--filet);
    scroll-margin-top: 96px;
}
.partie > *[b-1g7bp0fupd] {
    grid-column: 1;
    min-width: 0;
}
/* La marge court le long de la partie, à droite de la rubrique. */
.partie > .partie-marge[b-1g7bp0fupd] {
    grid-column: 2;
    grid-row: 1 / span 8;
    align-self: start;
}

.partie-titre[b-1g7bp0fupd] {
    margin: 0 0 0.5rem;
    padding: 0;
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-weight: 400;
    font-size: 1.28rem;
    line-height: 1.35;
    color: var(--rubrique);
}

.partie-sous-titre[b-1g7bp0fupd] {
    margin: 0.1rem 0 0.6rem;
    max-width: 36ch;
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: clamp(1.35rem, 2.1vw, 1.7rem);
    line-height: 1.25;
    color: var(--navy);
    text-wrap: balance;
}
/* Titre livré tout en capitales (lecture patristique) : capitales espacées, plus petites. */
.partie-sous-titre.capitales[b-1g7bp0fupd] {
    max-width: none;
    font-family: 'Lato', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 0.8rem;
    line-height: 1.6;
    letter-spacing: 0.12em;
}
.partie-intro[b-1g7bp0fupd] {
    margin: 0 0 1.3rem;
    font-family: 'Lora', serif;
    font-style: italic;
    font-size: 0.98rem;
    line-height: 1.55;
    color: var(--ink-soft);
}
.partie-sous-titre + .texte[b-1g7bp0fupd],
.partie-sous-titre + .antienne[b-1g7bp0fupd] { margin-top: 0.9rem; }

/* --- Marge : référence, auteur de l'hymne, actions --- */
.partie-marge[b-1g7bp0fupd] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 4px 0 4px 20px;
    border-left: 1px solid var(--gold);
}
.partie-ref[b-1g7bp0fupd] {
    margin: 0 0 6px;
    font-family: 'Playfair Display', serif;
    font-size: 1.05rem;
    line-height: 1.35;
    color: var(--navy);
}
.partie-note[b-1g7bp0fupd] {
    margin: 0 0 6px;
    font-family: 'Lora', serif;
    font-style: italic;
    font-size: 0.88rem;
    line-height: 1.45;
    color: var(--ink-soft);
}
.action[b-1g7bp0fupd] {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 36px;
    padding: 0;
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    font-size: 0.68rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--navy);
    background: none;
    border: 0;
    text-decoration: underline 1px transparent;
    text-underline-offset: 4px;
    transition: text-decoration-color 0.2s;
}
.liturgie .action[b-1g7bp0fupd] { color: var(--navy); }
.action:hover[b-1g7bp0fupd] { text-decoration-color: var(--gold); }
.action .bi[b-1g7bp0fupd] {
    font-size: 0.85rem;
    color: var(--gold-deep);
}

/* --- Psaume responsorial : refrain --- */
.refrain[b-1g7bp0fupd] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 14px;
    margin: 0.2rem 0 1.6rem;
    padding: 4px 0 4px 18px;
    border-left: 3px double var(--gold);
}
.refrain-sigle[b-1g7bp0fupd],
.antienne-sigle[b-1g7bp0fupd] {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-weight: 400;
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--rubrique);
}
.refrain-texte[b-1g7bp0fupd] {
    font-family: 'Lora', serif;
    font-size: 1.1rem;
    line-height: 1.6;
    color: var(--navy);
    text-indent: 2em hanging each-line;
}
.refrain-texte[b-1g7bp0fupd]  p { margin: 0 0 0.4em; }
.refrain-texte[b-1g7bp0fupd]  p:last-child { margin-bottom: 0; }
.refrain-texte[b-1g7bp0fupd]  em { color: var(--ink-soft); }
.refrain-ref[b-1g7bp0fupd] {
    grid-column: 2;
    margin: 6px 0 0;
    font-family: 'Lato', sans-serif;
    font-size: 0.74rem;
    letter-spacing: 0.06em;
    color: var(--ink-soft);
}

/* --- Office : antienne --- */
.antienne[b-1g7bp0fupd] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 12px;
    margin: 0.1rem 0 1.4rem;
    max-width: 66ch;
}
.antienne-texte[b-1g7bp0fupd] {
    font-family: 'Lora', serif;
    font-style: italic;
    font-size: 1.06rem;
    line-height: 1.6;
    color: var(--navy);
}
.antienne-texte[b-1g7bp0fupd]  p { margin: 0; }

/* --- Le texte (HTML de l'AELF) --- */
.texte[b-1g7bp0fupd] {
    max-width: 68ch;
    font-family: 'Lora', serif;
    font-size: 1.1rem;
    line-height: 1.75;
    color: var(--ink);
    overflow-wrap: break-word;
    text-indent: 0;
}
.texte[b-1g7bp0fupd]  p { margin: 0 0 1em; }
/* Lignes de sens (psaumes, hymnes, lectures coupées par <br>) : une ligne trop longue pour l'écran
   continue en retrait, comme dans un lectionnaire, pour ne pas la confondre avec la suivante.
   Le retrait (2,5 em) reste plus profond que l'alinéa de l'AELF (quatre espaces insécables).
   La prose (oraison, lecture patristique, Parole de Dieu) garde des paragraphes au fer. */
.texte[b-1g7bp0fupd]  p:has(br) { text-indent: 2.5em hanging each-line; }
.texte[b-1g7bp0fupd]  p:last-child { margin-bottom: 0; }
/* L'AELF glisse un <br /> entre ses paragraphes (répons, intercessions) : la marge suffit. */
.texte[b-1g7bp0fupd]  p + br { display: none; }
/* Numéros de versets : petits, rouges, comme dans un lectionnaire. */
.texte[b-1g7bp0fupd]  .verse_number {
    margin-right: 0.25em;
    font-family: 'Lato', sans-serif;
    font-size: 0.62em;
    font-weight: 700;
    line-height: 0;
    vertical-align: super;
    color: var(--rubrique);
}
/* Syllabes accentuées des psaumes (chant) : un filet discret plutôt qu'un soulignement. */
.texte[b-1g7bp0fupd]  u {
    text-decoration: underline 1px var(--gold);
    text-underline-offset: 3px;
}
/* R/, V/, *, + et † : en rouge (voir Rubriquer). */
.texte[b-1g7bp0fupd]  .sigle {
    font-style: normal;
    font-weight: 700;
    color: var(--rubrique);
}
/* « – Parole du Seigneur. », « – Acclamons la Parole de Dieu. » : la conclusion du lecteur. */
.texte[b-1g7bp0fupd]  p.conclusion {
    margin-top: 1.4em;
    font-style: italic;
    color: var(--ink-soft);
}
/* Marqueur de l'AELF resté dans le texte (« ou bien ») : en rubrique. */
.texte[b-1g7bp0fupd]  .ou-bien-aelf {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    color: var(--rubrique);
}
/* Croix du lectionnaire devant « Évangile de Jésus Christ selon… » */
.croix[b-1g7bp0fupd] {
    display: inline-block;
    margin: 0 0.5em 0 0;
    vertical-align: -1px;
    fill: var(--rubrique);
}

/* --- Deux lectures au choix --- */
.ou-bien[b-1g7bp0fupd] {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 0;
    padding-top: 6px;
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: 1rem;
    color: var(--rubrique);
}
.ou-bien[b-1g7bp0fupd]::before,
.ou-bien[b-1g7bp0fupd]::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--filet);
}
.partie.partie-choix[b-1g7bp0fupd] {
    border-top: 0;
    padding-top: 24px;
}

/* ============================================================
   ÉTATS ET CRÉDIT
   ============================================================ */
.chargement[b-1g7bp0fupd],
.vide[b-1g7bp0fupd] {
    margin: 40px 0 0;
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: 1.1rem;
    color: var(--ink-soft);
}
.vue-tete + .vide[b-1g7bp0fupd] { margin-top: 8px; }
/* Pendant le chargement, la page garde de la hauteur : la lecture ne remonte pas d'un bond. */
.chargement[b-1g7bp0fupd] { min-height: 70vh; }

/* Entrée de l'AELF sans lecture (Samedi saint) : une note, avec son renvoi. */
.note-messe[b-1g7bp0fupd] {
    max-width: 60ch;
    margin: 18px 0 0;
    font-family: 'Lora', serif;
    font-style: italic;
    font-size: 1.08rem;
    line-height: 1.6;
    color: var(--ink-soft);
}
.bouton-renvoi[b-1g7bp0fupd] { margin-top: 14px; }
.bouton-renvoi .bi[b-1g7bp0fupd] { font-size: 0.9rem; }

.erreur-bloc[b-1g7bp0fupd] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 24px;
}
.erreur-bloc .erreur[b-1g7bp0fupd] { margin: 0; }
.erreur[b-1g7bp0fupd] {
    margin: 40px 0 0;
    max-width: 60ch;
    padding-left: 16px;
    border-left: 3px solid var(--rubrique);
    font-family: 'Lora', serif;
    color: var(--rubrique);
}

.credit[b-1g7bp0fupd] {
    margin: 48px 0 0;
    padding-top: 18px;
    border-top: 1px solid var(--gold);
    font-family: 'Lato', sans-serif;
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-soft);
}
.credit a[b-1g7bp0fupd] {
    color: var(--navy);
    text-decoration: underline 1px var(--gold);
    text-underline-offset: 3px;
}
.credit a:hover[b-1g7bp0fupd] { text-decoration-color: var(--rubrique); }

/* ============================================================
   TABLETTE
   ============================================================ */
@media (max-width: 1099.98px) {
    .liturgie[b-1g7bp0fupd] { --marge: 168px; }
    .tete[b-1g7bp0fupd] { grid-template-columns: minmax(0, 1fr) 240px; gap: 40px; }
    .partie[b-1g7bp0fupd] { column-gap: 40px; }
    .sommaire[b-1g7bp0fupd] { max-width: none; }
}

/* Tablette étroite : la Messe et les sept heures tiennent sur une ligne sans l'étiquette, qui reste
   le nom accessible de la liste ; un filet sépare la messe des heures. */
@media (min-width: 768px) and (max-width: 959.98px) {
    .heures-etiquette[b-1g7bp0fupd] { display: none; }
    .heures-liste[b-1g7bp0fupd] {
        margin-left: 8px;
        padding-left: 6px;
        border-left: 1px solid var(--filet);
    }
    .heure[b-1g7bp0fupd] { padding-inline: 12px; }
}

/* Sous 900 px : la marge passe sous la rubrique, sur une ligne. */
@media (max-width: 899.98px) {
    /* Vignette plus étroite : le choix du jour tient sur une ligne. */
    .tete[b-1g7bp0fupd] { grid-template-columns: minmax(0, 1fr) 190px; gap: 32px; }
    .choix-date[b-1g7bp0fupd]  input { width: 9.5rem; }
    .partie[b-1g7bp0fupd] { display: block; }
    .partie-marge[b-1g7bp0fupd] {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 0 22px;
        margin: -2px 0 12px;
        padding: 0;
        border-left: 0;
    }
    .partie-ref[b-1g7bp0fupd],
    .partie-note[b-1g7bp0fupd] { margin: 0; }
    .partie-ref[b-1g7bp0fupd] { flex-basis: 100%; }
    .action[b-1g7bp0fupd] { min-height: 44px; }
}

/* ============================================================
   MOBILE (< 768 px)
   ============================================================ */
@media (max-width: 767.98px) {
    .titre-courant[b-1g7bp0fupd] {
        justify-content: center;
        margin: -28px 0 36px;
        text-align: center;
    }
    .tc-droite[b-1g7bp0fupd] { text-align: center; }

    /* La vignette devient un petit vitrail en arc, à droite de la désignation et du chapeau. */
    .tete[b-1g7bp0fupd] {
        grid-template-columns: minmax(0, 1fr) 84px;
        gap: 0 18px;
    }
    .tete-texte[b-1g7bp0fupd] { display: contents; }
    .tete-texte > *[b-1g7bp0fupd] { grid-column: 1 / -1; }
    .tete-texte > .rubrique[b-1g7bp0fupd] { grid-row: 1; }
    .tete h1[b-1g7bp0fupd] { grid-row: 2; }
    .tete-designation[b-1g7bp0fupd] { grid-row: 3; grid-column: 1; }
    .tete-chapeau[b-1g7bp0fupd] { grid-row: 4; grid-column: 1; }
    .choix-jour[b-1g7bp0fupd] { grid-row: 5; }
    .tete-vignette[b-1g7bp0fupd] {
        grid-row: 3 / span 2;
        grid-column: 2;
        margin: 4px 0 0;
    }
    .tete-vignette img[b-1g7bp0fupd] {
        aspect-ratio: 3 / 4;
        padding: 3px;
        border-radius: 50% 50% 0 0 / 32% 32% 0 0;
    }
    .tete-vignette figcaption[b-1g7bp0fupd] { display: none; }
    .tete-designation[b-1g7bp0fupd] { font-size: 1.15rem; }
    .tete-chapeau[b-1g7bp0fupd] { font-size: 0.98rem; }
    /* « Jour » et « Aujourd'hui » sur une ligne, la date entre ses flèches sur la suivante. */
    .choix-jour[b-1g7bp0fupd] {
        display: grid;
        grid-template-columns: 44px minmax(0, 1fr) auto 44px;
        grid-template-areas:
            "etiquette etiquette auj auj"
            "prec date date suiv";
        gap: 10px 8px;
        margin-top: 24px;
    }
    .choix-etiquette[b-1g7bp0fupd] { grid-area: etiquette; }
    .bouton-prec[b-1g7bp0fupd] { grid-area: prec; }
    .choix-date[b-1g7bp0fupd] { grid-area: date; }
    .bouton-suiv[b-1g7bp0fupd] { grid-area: suiv; }
    .bouton-aujourdhui[b-1g7bp0fupd] { grid-area: auj; }
    .choix-date[b-1g7bp0fupd]  input { width: 100%; }

    /* Messe et sept heures : deux rangées de quatre. */
    .heures[b-1g7bp0fupd] {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        margin-top: 40px;
    }
    .heures-etiquette[b-1g7bp0fupd] { display: none; }
    .heures-liste[b-1g7bp0fupd] { display: contents; }
    .heure[b-1g7bp0fupd] {
        width: 100%;
        min-height: 50px;
        padding: 8px 2px;
        font-size: 1rem;
    }
    .heure.active[b-1g7bp0fupd]::after {
        bottom: 3px;
        width: 7px;
        height: 7px;
        box-shadow: none;
    }

    .vue[b-1g7bp0fupd] { margin-top: 40px; }
    .vue-tete[b-1g7bp0fupd] { padding-bottom: 20px; }
    .sommaire[b-1g7bp0fupd] { margin-top: 16px; }
    .sommaire a[b-1g7bp0fupd] { padding-block: 2px; font-size: 0.95rem; }
    .partie[b-1g7bp0fupd] { padding: 32px 0 36px; }
    .partie-titre[b-1g7bp0fupd] { font-size: 1.18rem; }
    .partie-sous-titre[b-1g7bp0fupd] { font-size: 1.32rem; }
    .texte[b-1g7bp0fupd] { font-size: 1.04rem; line-height: 1.7; }
    .refrain-texte[b-1g7bp0fupd] { font-size: 1.04rem; }
    .credit[b-1g7bp0fupd] { line-height: 1.7; }
}

@media (prefers-reduced-motion: reduce) {
    .liturgie *[b-1g7bp0fupd],
    .liturgie *[b-1g7bp0fupd]::before,
    .liturgie *[b-1g7bp0fupd]::after {
        transition: none !important;
    }
}
/* /Components/Pages/Page.razor.rz.scp.css */
/* ============================================================
   ARTICLE — folio de lecture « livre d'heures »
   Colonne de ~70 caractères, rubrique rouge pour la date, titre à
   lettrine d'or sur la couleur du jour, pied (thèmes, partage) entre
   filets d'or, articles similaires dans le style de l'accueil.
   Le texte lui-même (.post-content) est mis en forme dans app.css.
   ============================================================ */

/* La colonne prend le corps du texte (Lora 18 px) : 36em ≈ 648 px, soit ~70 caractères par ligne
   (l'unité ch, largeur du « 0 », en donnerait ~83 pour 68ch). */
.article-colonne[b-e7kb80fjir] {
    max-width: 36em;
    margin-inline: auto;
    font-size: 1.125rem;
}

/* ---------- En-tête ---------- */
.article-tete[b-e7kb80fjir] {
    margin-bottom: 2.6rem;
}
.post-meta[b-e7kb80fjir] {
    margin: 0 0 0.35rem;
    font-size: 1rem;
}
.post-auteur[b-e7kb80fjir],
.post-duree[b-e7kb80fjir] { white-space: nowrap; }
/* « 1er » : l'ordinal en exposant, sans agrandir l'interligne. */
.ordinal[b-e7kb80fjir] {
    font-size: 0.7em;
    line-height: 0;
    vertical-align: 0.4em;
}

/* Corps plus petit que celui des autres titres de page (2,9 rem, app.css) : voulu, car la colonne
   de lecture est étroite (36 em) et les titres d'article sont longs. */
.article-tete h1[b-e7kb80fjir] {
    margin: 0;
    padding-bottom: 1.2rem;
    font-size: clamp(1.85rem, 1.15rem + 2.3vw, 2.6rem);
    line-height: 1.18;
}

/* Lettrine tombante sur deux lignes (data-lettrine, posé par js/lettrine-titre.js ; avant la mesure,
   classes titre-long et titre-moyen) : app.css. */
/* Titre ouvert par un guillemet : le « pend dans la marge, à gauche de la lettrine. */
.titre-guillemet[b-e7kb80fjir] { position: relative; }
.guillemet-suspendu[b-e7kb80fjir] {
    position: absolute;
    top: 0.2em;
    right: 100%;
    padding-right: 0.12em;
    line-height: 1.18;
}

.article-modifier[b-e7kb80fjir] {
    margin: 0 0 2rem;
}

/* ---------- Pied : thèmes et partage ---------- */
/* Deux lignes entre filets ; les étiquettes forment une colonne commune (sous-grille). */
.article-pied[b-e7kb80fjir] {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    column-gap: 1.75rem;
    margin-top: 3.5rem;
    border-top: 1px solid var(--filet);
}
.pied-ligne[b-e7kb80fjir] {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: subgrid;
    align-items: center;
    row-gap: 0.4rem;
    padding: 1.1rem 0;
    border-bottom: 1px solid var(--filet);
}
.pied-etiquette[b-e7kb80fjir] {
    margin: 0;
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    font-size: 0.72rem;
    line-height: 1.4;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.themes[b-e7kb80fjir] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    margin: 0;
    padding: 0;
    list-style: none;
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: 1.08rem;
    line-height: 1.6;
}
/* Le point suit le thème au lieu de précéder le suivant : il reste en fin de ligne quand la liste
   passe à la ligne. En rouge de rubrique, comme le « › » des fils d'Ariane (pas d'or sur le vélin). */
.themes li:not(:last-child)[b-e7kb80fjir]::after {
    content: "·" / "";
    margin: 0 0.55em;
    font-style: normal;
    color: var(--rubrique);
}
.themes a[b-e7kb80fjir] {
    color: var(--navy);
    text-decoration: underline 1px var(--gold);
    text-underline-offset: 4px;
    transition: text-decoration-color 0.2s;
}
.themes a:hover[b-e7kb80fjir] { text-decoration-color: var(--rubrique); }
.themes span[b-e7kb80fjir] { color: var(--ink-soft); }

.partage-liste[b-e7kb80fjir] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.partage-bouton[b-e7kb80fjir] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    font-size: 1rem;
    line-height: 1;
    color: var(--navy);
    background: transparent;
    border: 1px solid var(--filet);
    border-radius: 0;
    transition: background-color 0.2s, border-color 0.2s;
}
.partage-bouton:hover[b-e7kb80fjir] {
    color: var(--navy);
    background: rgba(201, 165, 90, 0.16);
    border-color: var(--gold);
}
.partage-bouton:focus-visible[b-e7kb80fjir] {
    outline: 2px solid var(--navy);
    outline-offset: 3px;
}
.partage-copie[b-e7kb80fjir] {
    grid-column: 2;
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: 0.98rem;
    color: var(--rubrique);
}
/* Vide, la zone d'annonce reste dans l'arbre d'accessibilité (sinon « Lien copié » n'est pas lu). */
.partage-copie:empty[b-e7kb80fjir] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
}

/* ---------- Articles similaires ---------- */
/* Pas de filet au-dessus : celui du pied ferme déjà l'article ; la rubrique et la lettrine ouvrent la section. */
.similaires[b-e7kb80fjir] {
    margin-top: 6rem;
}
.similaires-tete[b-e7kb80fjir] {
    margin-bottom: 2.25rem;
}
/* Titre (h2.similaires-titre.lettrine-h2) : petite lettrine, règle commune d'app.css. */

.similaires a[b-e7kb80fjir] {
    color: var(--navy);
    text-decoration: none;
}

/* Les trois premiers : vignettes cintrées, comme « Prier et approfondir ». */
.similaires-une[b-e7kb80fjir] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.similaire-carte[b-e7kb80fjir] {
    display: block;
    height: 100%;
}
.similaire-image[b-e7kb80fjir] {
    display: block;
    aspect-ratio: 4 / 3;
    padding: 5px;
    background: var(--ivory);
    border: 3px double var(--gold);
    border-radius: 50% 50% 0 0 / 36% 36% 0 0;
    overflow: hidden;
}
.similaire-image img[b-e7kb80fjir] {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    object-fit: cover;
    border-radius: 50% 50% 0 0 / 35% 35% 0 0;
}
.similaire-texte[b-e7kb80fjir] { display: block; }
.similaire-texte h3[b-e7kb80fjir] {
    margin: 16px 0 0.4rem;
    padding: 0;
    font-family: 'Playfair Display', serif;
    font-weight: 400;
    font-size: 1.25rem;
    line-height: 1.25;
    color: var(--navy);
    text-wrap: pretty;
    text-decoration: underline 1px transparent;
    text-underline-offset: 5px;
    transition: text-decoration-color 0.2s;
}
.similaire-carte:hover h3[b-e7kb80fjir],
.similaire-carte:focus-visible h3[b-e7kb80fjir] { text-decoration-color: var(--gold); }
.similaire-extrait[b-e7kb80fjir] {
    display: block;
    font-family: 'Lora', serif;
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--ink-soft);
}

/* Les suivants : liste à vignettes, comme la suite des « Derniers articles ». */
.similaires-suite[b-e7kb80fjir] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 48px;
    margin: 48px 0 0;
    padding: 0;
    list-style: none;
}
.similaires-suite li[b-e7kb80fjir] { border-bottom: 1px solid var(--filet); }
.similaires-suite li:nth-child(-n + 2)[b-e7kb80fjir] { border-top: 1px solid var(--filet); }
.similaires-suite a[b-e7kb80fjir] {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    align-items: center;
    gap: 16px;
    min-height: 64px;
    padding: 12px 0;
}
.similaires-suite img[b-e7kb80fjir] {
    display: block;
    width: 64px;
    height: 64px;
    margin: 0;
    object-fit: cover;
    border: 1px solid var(--gold);
    border-radius: 0;
}
.suite-titre[b-e7kb80fjir] {
    font-family: 'Playfair Display', serif;
    font-size: 1.05rem;
    line-height: 1.3;
    text-wrap: pretty;
    text-decoration: underline 1px transparent;
    text-underline-offset: 4px;
    transition: text-decoration-color 0.2s;
}
.similaires-suite a:hover .suite-titre[b-e7kb80fjir],
.similaires-suite a:focus-visible .suite-titre[b-e7kb80fjir] { text-decoration-color: var(--gold); }

/* ---------- Page introuvable ---------- */
.introuvable p:not(.rubrique)[b-e7kb80fjir] {
    font-family: 'Lora', serif;
    color: var(--ink);
}
/* Même champ que la page de recherche : bord en or foncé, filet d'or intérieur. */
.introuvable-recherche[b-e7kb80fjir] {
    display: flex;
    gap: 10px;
    margin: 1.25rem 0 0;
}
.introuvable-recherche input[b-e7kb80fjir] {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 50px;
    padding: 0.65rem 1rem;
    font-family: 'Lora', serif;
    font-size: 1.05rem;
    color: var(--ink);
    background: var(--ivory);
    border: 1px solid var(--gold-deep);
    border-radius: 0;
    box-shadow: inset 0 0 0 3px var(--ivory), inset 0 0 0 4px var(--filet);
}
.introuvable-recherche input[b-e7kb80fjir]::placeholder {
    color: var(--ink-soft);
    font-style: italic;
}
.introuvable-recherche input:focus[b-e7kb80fjir] {
    outline: 2px solid var(--navy);
    outline-offset: 2px;
}
.introuvable-recherche .btn[b-e7kb80fjir] { flex: 0 0 auto; min-height: 50px; }
.introuvable-liens[b-e7kb80fjir] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.75rem;
    margin-top: 1.75rem;
}
.introuvable-liens a[b-e7kb80fjir] {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    color: var(--navy);
    text-decoration: underline 1px var(--gold);
    text-underline-offset: 5px;
}
.introuvable-liens a:hover[b-e7kb80fjir] { text-decoration-color: var(--rubrique); }

/* ---------- Tablette et téléphone ---------- */
@media (max-width: 899.98px) {
    .similaires-une[b-e7kb80fjir] {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }
    .similaires-une li[b-e7kb80fjir] { border-bottom: 1px solid var(--filet); }
    .similaires-une li:first-child[b-e7kb80fjir] { border-top: 1px solid var(--filet); }
    .similaire-carte[b-e7kb80fjir] {
        display: grid;
        grid-template-columns: 96px minmax(0, 1fr);
        gap: 20px;
        align-items: center;
        padding: 14px 0;
    }
    .similaire-image[b-e7kb80fjir] { aspect-ratio: 4 / 5; padding: 3px; }
    .similaire-texte h3[b-e7kb80fjir] { margin-top: 0; font-size: 1.15rem; }
    .similaires-suite[b-e7kb80fjir] {
        grid-template-columns: minmax(0, 1fr);
        margin-top: 0;
    }
    .similaires-suite li:nth-child(-n + 2)[b-e7kb80fjir] { border-top: 0; }
}

@media (max-width: 767.98px) {
    .article-tete[b-e7kb80fjir] { margin-bottom: 2rem; }
    .article-pied[b-e7kb80fjir] { display: block; margin-top: 2.75rem; }
    .pied-ligne[b-e7kb80fjir] { display: block; }
    .pied-etiquette[b-e7kb80fjir] { margin-bottom: 0.6rem; }
    .partage-bouton[b-e7kb80fjir] { width: 44px; height: 44px; }
    .similaires[b-e7kb80fjir] { margin-top: 4rem; }
    .introuvable-recherche[b-e7kb80fjir] { flex-direction: column; }
    .similaire-carte[b-e7kb80fjir] { grid-template-columns: 76px minmax(0, 1fr); gap: 16px; }
    .similaire-texte h3[b-e7kb80fjir] { font-size: 1.1rem; }
    .similaire-extrait[b-e7kb80fjir] { font-size: 0.9rem; }
}

@media (prefers-reduced-motion: reduce) {
    .article *[b-e7kb80fjir],
    .article *[b-e7kb80fjir]::before,
    .article *[b-e7kb80fjir]::after { transition: none !important; }
}
/* /Components/Pages/PageNews.razor.rz.scp.css */
/* ============================================================
   ACTUALITÉ — revue de presse au style des « Derniers articles »
   de l'accueil : à la une, vignettes encadrées d'un double filet
   d'or ; le fil, rangé par jour en liste réglée de filets.
   Pas de cartes : les nouvelles sont posées sur le vélin.
   Les vignettes de Cathoscan font 299 × 168 px : leur cadre ne
   dépasse jamais 315 px (299 + marge intérieure + double filet).
   ============================================================ */

.page-content a[b-9rtaon1aob] {
    color: var(--navy);
    text-decoration: none;
}

/* ---------- Titres de section : petite lettrine (h2.lettrine-h2, règle commune d'app.css) ---------- */
.actu-tete[b-9rtaon1aob] {
    margin-bottom: 32px;
}

/* ---------- Introduction : chapeau à gauche, épigraphe en glose à droite ---------- */
.actu-intro[b-9rtaon1aob] {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 64px;
    align-items: start;
}
.actu-chapeau[b-9rtaon1aob] {
    margin: 0;
    max-width: 52ch;
    font-family: 'Lora', serif;
    font-size: 1.12rem;
    line-height: 1.7;
    color: var(--ink);
}
.actu-etat[b-9rtaon1aob] {
    margin: 0.9rem 0 0;
    font-family: 'Lato', sans-serif;
    font-size: 0.7rem;
    line-height: 1.7;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-soft);
}
.actu-etat span[aria-hidden][b-9rtaon1aob] { margin-inline: 0.3em; }

.actu-epigraphe[b-9rtaon1aob] {
    margin: 0;
    padding-left: 28px;
    border-left: 1px solid var(--gold);
}
.actu-epigraphe p[b-9rtaon1aob] {
    margin: 0 0 8px;
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: 1.08rem;
    line-height: 1.55;
    color: var(--navy);
}
.actu-epigraphe cite[b-9rtaon1aob] {
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--rubrique);
}

/* ---------- Sections ---------- */
.actu-section[b-9rtaon1aob] {
    margin-top: 64px;
    padding-top: 56px;
    border-top: 1px solid var(--filet);
}

/* ---------- Une nouvelle (commun) ---------- */
/* Le lien épouse son contenu : contour de focus et zone cliquable s'arrêtent à la date. */
.actu-lien[b-9rtaon1aob] {
    display: block;
}
.actu-image[b-9rtaon1aob] {
    display: block;
}
.actu-image img[b-9rtaon1aob] {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    margin: 0;
    border-radius: 0;
    background: var(--ivory);
}
.actu-titre[b-9rtaon1aob] {
    display: block;
    margin: 0;
    padding: 0;
    font-family: 'Playfair Display', serif;
    font-weight: 400;
    color: var(--navy);
    overflow-wrap: break-word;
    text-decoration: underline 1px transparent;
    text-underline-offset: 4px;
    transition: text-decoration-color 0.2s;
}
.actu-lien:focus-visible .actu-titre[b-9rtaon1aob] { text-decoration-color: var(--gold); }
@media (hover: hover) {
    .actu-lien:hover .actu-titre[b-9rtaon1aob] { text-decoration-color: var(--gold); }
}

.actu-meta[b-9rtaon1aob] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 10px;
}
.actu-media[b-9rtaon1aob],
.actu-source[b-9rtaon1aob] {
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    font-size: 0.66rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-soft);
}
.actu-media[b-9rtaon1aob] { color: var(--rubrique); }
.actu-date[b-9rtaon1aob] {
    font-family: 'Lora', serif;
    font-style: italic;
    font-size: 0.84rem;
    color: var(--ink-soft);
}

/* ---------- À la une : quatre vignettes encadrées ---------- */
.actu-une[b-9rtaon1aob] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 315px));
    justify-content: space-between;
    gap: 36px 32px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.actu-une .actu-image[b-9rtaon1aob] {
    padding: 5px;
    background: var(--ivory);
    border: 3px double var(--gold);
}
.actu-une .actu-titre[b-9rtaon1aob] {
    margin: 16px 0 8px;
    font-size: 1.12rem;
    line-height: 1.32;
}

/* ---------- Le fil : un titre par jour, puis deux colonnes réglées de filets ---------- */
/* Le jour, en petites capitales : losange d'or des lettrines, filet jusqu'à la marge. */
.actu-jour[b-9rtaon1aob] {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0;
    padding: 0 0 4px;
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    font-size: 0.74rem;
    line-height: 1.5;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--navy);
}
.actu-jour[b-9rtaon1aob]::before {
    content: "";
    flex: none;
    width: 7px;
    height: 7px;
    background: var(--gold);
    transform: rotate(45deg);
}
.actu-jour[b-9rtaon1aob]::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--filet);
}
.actu-fil + .actu-jour[b-9rtaon1aob] { margin-top: 48px; }

.actu-fil[b-9rtaon1aob] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 64px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.actu-fil li[b-9rtaon1aob] { border-bottom: 1px solid var(--filet); }
/* Première nouvelle ajoutée par « Plus de nouvelles » : elle reçoit le focus (tabindex=-1). */
.actu-fil li:focus[b-9rtaon1aob] { outline: none; }
.actu-fil li:focus-visible[b-9rtaon1aob] {
    outline: 2px solid var(--navy);
    outline-offset: 3px;
}

.actu-fil .actu-lien[b-9rtaon1aob] {
    display: grid;
    grid-template-columns: 136px minmax(0, 1fr);
    gap: 20px;
    align-items: start;
    padding: 16px 0;
}
.actu-fil .actu-image img[b-9rtaon1aob] {
    border: 1px solid var(--gold);
}
.actu-fil .actu-titre[b-9rtaon1aob] {
    margin: 0 0 6px;
    font-size: 1.04rem;
    line-height: 1.32;
}

.actu-plus[b-9rtaon1aob] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin: 48px 0 0;
}
.actu-plus .btn[b-9rtaon1aob] {
    min-height: 48px;
    padding: 14px 28px;
}
.actu-reste[b-9rtaon1aob] {
    font-family: 'Lora', serif;
    font-style: italic;
    font-size: 0.92rem;
    color: var(--ink-soft);
}

/* ---------- Fin de page ---------- */
.actu-vide[b-9rtaon1aob] {
    margin: 56px 0 0;
    padding: 40px 0;
    border-block: 1px solid var(--filet);
    font-family: 'Lora', serif;
    font-style: italic;
    font-size: 1.05rem;
    color: var(--ink-soft);
    text-align: center;
}
.actu-cathoscan[b-9rtaon1aob] {
    max-width: 62ch;
    margin: 64px auto 0;
    padding-top: 40px;
    border-top: 1px solid var(--filet);
    font-family: 'Lora', serif;
    font-style: italic;
    font-size: 1rem;
    line-height: 1.7;
    color: var(--ink-soft);
    text-align: center;
}
.page-content .actu-cathoscan a[b-9rtaon1aob] {
    font-style: normal;
    text-decoration: underline 1px var(--gold);
    text-underline-offset: 4px;
    transition: text-decoration-color 0.2s;
}
@media (hover: hover) {
    .page-content .actu-cathoscan a:hover[b-9rtaon1aob] { text-decoration-color: var(--rubrique); }
}

/* ============================================================
   TABLETTE (< 1024 px) : une en deux colonnes plafonnées, fil en une colonne
   ============================================================ */
@media (max-width: 1023.98px) {
    .actu-une[b-9rtaon1aob] {
        grid-template-columns: repeat(2, minmax(0, 315px));
        justify-content: start;
        gap: 40px 32px;
    }
    .actu-fil[b-9rtaon1aob] { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================
   < 900 px : l'épigraphe passe sous le chapeau, toujours en glose
   ============================================================ */
@media (max-width: 899.98px) {
    .actu-intro[b-9rtaon1aob] {
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
    }
    .actu-epigraphe[b-9rtaon1aob] { padding-left: 20px; }
}

/* ============================================================
   MOBILE (< 600 px) : la plus récente en grand, le reste en liste
   ============================================================ */
@media (max-width: 599.98px) {
    .actu-section[b-9rtaon1aob] {
        margin-top: 48px;
        padding-top: 40px;
    }
    .actu-tete[b-9rtaon1aob] { margin-bottom: 24px; }
    .actu-chapeau[b-9rtaon1aob] { font-size: 1.04rem; }

    .actu-une[b-9rtaon1aob] {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }
    .actu-une li:first-child .actu-image[b-9rtaon1aob] { max-width: 315px; }
    .actu-une li:nth-child(2)[b-9rtaon1aob] {
        margin-top: 24px;
        border-top: 1px solid var(--filet);
    }
    .actu-une li + li[b-9rtaon1aob] { border-bottom: 1px solid var(--filet); }
    .actu-une li:last-child[b-9rtaon1aob] { border-bottom: 0; }

    /* Même ligne que le fil : petite vignette cerclée d'un filet d'or, titre à côté. */
    .actu-une li + li .actu-lien[b-9rtaon1aob],
    .actu-fil .actu-lien[b-9rtaon1aob] {
        display: grid;
        grid-template-columns: 104px minmax(0, 1fr);
        gap: 16px;
        align-items: start;
        padding: 14px 0;
    }
    .actu-une li + li .actu-image[b-9rtaon1aob] {
        padding: 0;
        border: 0;
        background: none;
    }
    .actu-une li + li .actu-image img[b-9rtaon1aob] { border: 1px solid var(--gold); }
    .actu-une li + li .actu-titre[b-9rtaon1aob],
    .actu-fil .actu-titre[b-9rtaon1aob] {
        margin: 0 0 4px;
        font-size: 1rem;
        line-height: 1.3;
    }
    .actu-une li:first-child .actu-titre[b-9rtaon1aob] { font-size: 1.25rem; }
    .actu-fil + .actu-jour[b-9rtaon1aob] { margin-top: 40px; }
    .actu-plus .btn[b-9rtaon1aob] { width: 100%; }
    .actu-cathoscan[b-9rtaon1aob] {
        margin-top: 48px;
        padding-top: 32px;
        font-size: 0.95rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .actu-titre[b-9rtaon1aob],
    .page-content .actu-cathoscan a[b-9rtaon1aob] { transition: none; }
}
/* /Components/Pages/PolitiqueConfidentialite.razor.rz.scp.css */
/* ============================================================
   POLITIQUE DE CONFIDENTIALITÉ — document juridique lisible
   Une colonne à la mesure de lecture, articles numérotés en
   rubrique dans la marge, filets d'or entre les articles.
   Sur grand écran, le sommaire passe dans la marge droite, en
   glose, et reste à portée pendant toute la lecture.
   ============================================================ */

.politique[b-bcb1zwxj3i] {
    --marge-num: 64px;
    max-width: calc(var(--marge-num) + 42rem);
}

/* Liens du texte : navy, soulignés d'or (rubrique au survol). */
.politique a[b-bcb1zwxj3i] {
    color: var(--navy);
    text-decoration: underline 1px var(--gold);
    text-underline-offset: 4px;
    transition: text-decoration-color 0.2s;
}
@media (hover: hover) {
    .politique a:hover[b-bcb1zwxj3i] { text-decoration-color: var(--rubrique); }
}

/* ---------- En-tête ---------- */
.date-maj[b-bcb1zwxj3i] {
    margin: 0 0 1.4rem;
    font-family: 'Lato', sans-serif;
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-soft);
}
.preambule[b-bcb1zwxj3i] {
    margin: 0;
    font-family: 'Lora', serif;
    font-size: 1.14rem;
    line-height: 1.75;
    color: var(--ink);
}

/* ---------- Sommaire ---------- */
.sommaire[b-bcb1zwxj3i] {
    margin: 2.75rem 0 0;
    padding: 1.6rem 0 1.4rem;
    border-block: 1px solid var(--filet);
}
.sommaire ol[b-bcb1zwxj3i] {
    margin: 0;
    padding: 0;
    list-style: none;
    columns: 2;
    column-gap: 48px;
}
.sommaire li[b-bcb1zwxj3i] {
    break-inside: avoid;
}
.politique .sommaire a[b-bcb1zwxj3i] {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr);
    align-items: baseline;
    padding: 0.4rem 0;
    font-family: 'Lora', serif;
    font-size: 0.95rem;
    line-height: 1.45;
    text-decoration-color: transparent;
}
.politique .sommaire a:focus-visible[b-bcb1zwxj3i] { text-decoration-color: var(--gold); }
@media (hover: hover) {
    .politique .sommaire a:hover[b-bcb1zwxj3i] { text-decoration-color: var(--gold); }
}
.politique a:focus-visible[b-bcb1zwxj3i] {
    outline: 2px solid var(--navy);
    outline-offset: 3px;
    border-radius: 2px;
}
.sommaire-num[b-bcb1zwxj3i] {
    font-family: 'Playfair Display', serif;
    font-size: 1.05rem;
    line-height: 1;
    color: var(--rubrique);
}

/* ---------- Articles ---------- */
.article[b-bcb1zwxj3i] {
    margin-top: 2.75rem;
    padding-top: 2.25rem;
    border-top: 1px solid var(--filet);
}
.sommaire + .article[b-bcb1zwxj3i] {
    margin-top: 0;
    border-top: 0;
}

.article-titre[b-bcb1zwxj3i] {
    display: grid;
    grid-template-columns: var(--marge-num) minmax(0, 1fr);
    align-items: baseline;
    margin: 0 0 1rem;
    padding: 0;
    font-size: clamp(1.35rem, 2vw, 1.6rem);
    line-height: 1.25;
    text-wrap: balance;
    /* La barre fixe (80 px) ne recouvre pas le titre atteint depuis le sommaire. */
    scroll-margin-top: 104px;
}
/* Cible d'un lien du sommaire : elle reçoit le focus (tabindex=-1) sans contour, comme sur l'accueil. */
.article-titre:focus[b-bcb1zwxj3i] { outline: none; }
.article-num[b-bcb1zwxj3i] {
    font-family: 'Playfair Display', serif;
    font-size: 1.15em;
    line-height: 1;
    color: var(--rubrique);
}

.article-corps[b-bcb1zwxj3i] {
    padding-left: var(--marge-num);
    font-family: 'Lora', serif;
    font-size: 1.06rem;
    line-height: 1.75;
    color: var(--ink);
}
.article-corps p[b-bcb1zwxj3i] {
    margin: 0 0 1rem;
}
.article-corps p:last-child[b-bcb1zwxj3i],
.article-corps ul:last-child[b-bcb1zwxj3i] { margin-bottom: 0; }
.article-corps strong[b-bcb1zwxj3i] {
    font-weight: 700;
    color: var(--navy);
}

/* Listes : petit losange d'or en guise de puce. */
.article-corps ul[b-bcb1zwxj3i] {
    margin: 0 0 1rem;
    padding: 0;
    list-style: none;
}
.article-corps li[b-bcb1zwxj3i] {
    position: relative;
    margin-bottom: 0.6rem;
    padding-left: 1.5rem;
}
.article-corps li[b-bcb1zwxj3i]::before {
    content: "";
    position: absolute;
    left: 0.15rem;
    top: 0.72em;
    width: 6px;
    height: 6px;
    background: var(--gold);
    transform: rotate(45deg);
}

/* Coordonnées de la Commission : en glose, filet d'or à gauche. */
.coordonnees[b-bcb1zwxj3i] {
    display: grid;
    gap: 0.2rem;
    padding: 0.2rem 0 0.2rem 1.25rem;
    border-left: 1px solid var(--gold);
}

.bouton-preferences-conteneur[b-bcb1zwxj3i] {
    margin: 3rem 0 0;
    padding: 2.25rem 0 0 var(--marge-num);
    border-top: 1px solid var(--filet);
    scroll-margin-top: 104px;
}
.bouton-preferences-conteneur .btn[b-bcb1zwxj3i] {
    min-height: 48px;
    padding: 14px 28px;
}

/* ============================================================
   GRAND ÉCRAN (≥ 1200 px) : le sommaire dans la marge droite
   Le texte garde sa mesure ; le sommaire, en glose (filet d'or
   à gauche), reste fixe sous la barre pendant la lecture.
   ============================================================ */
@media (min-width: 1200px) {
    .politique[b-bcb1zwxj3i] {
        display: grid;
        grid-template-columns: minmax(0, calc(var(--marge-num) + 42rem)) minmax(0, 240px);
        column-gap: 56px;
        max-width: none;
    }
    .politique > *[b-bcb1zwxj3i] { grid-column: 1; }
    .politique > .sommaire[b-bcb1zwxj3i] {
        grid-column: 2;
        grid-row: 1 / span 20;
        align-self: start;
        position: sticky;
        top: 104px;
        max-height: calc(100vh - 128px);
        overflow-y: auto;
        margin: 0;
        /* Marges intérieures : le contour de focus des liens n'est pas rogné par le défilement. */
        padding: 6px 8px 6px 24px;
        border: 0;
        border-left: 1px solid var(--gold);
    }
    .sommaire ol[b-bcb1zwxj3i] { columns: 1; }
    .politique .sommaire a[b-bcb1zwxj3i] {
        grid-template-columns: 1.6rem minmax(0, 1fr);
        padding: 0.3rem 0;
        font-size: 0.88rem;
        line-height: 1.4;
    }
    .sommaire-num[b-bcb1zwxj3i] { font-size: 0.98rem; }
    /* Le premier article suit le préambule : il reprend son filet. */
    .sommaire + .article[b-bcb1zwxj3i] {
        margin-top: 2.75rem;
        border-top: 1px solid var(--filet);
    }
}

/* ============================================================
   MOBILE : numéros resserrés, sommaire en une colonne
   ============================================================ */
@media (max-width: 767.98px) {
    .politique[b-bcb1zwxj3i] { --marge-num: 0px; }
    .preambule[b-bcb1zwxj3i] { font-size: 1.04rem; }
    .sommaire ol[b-bcb1zwxj3i] { columns: 1; }
    .article[b-bcb1zwxj3i] {
        margin-top: 2.25rem;
        padding-top: 1.75rem;
    }
    .article-titre[b-bcb1zwxj3i] {
        grid-template-columns: 2.6rem minmax(0, 1fr);
        font-size: 1.3rem;
    }
    .article-corps[b-bcb1zwxj3i] { font-size: 1rem; }
    .bouton-preferences-conteneur .btn[b-bcb1zwxj3i] {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .politique a[b-bcb1zwxj3i] { transition: none; }
}
/* /Components/Pages/Search.razor.rz.scp.css */
/* ============================================================
   RECHERCHE — le copiste à la loupe en vignette cintrée, un champ
   au filet d'or, des résultats en liste à filets avec l'extrait
   centré sur le mot trouvé (surligné d'or pâle).
   ============================================================ */

.recherche-tete[b-5tg7183qck] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 210px;
    gap: 56px;
    align-items: start;
}
.recherche-intro h1[b-5tg7183qck] { margin-bottom: 1.75rem; }

/* Vignette cintrée, comme les chemins de l'accueil ; recadrée sur le moine et sa loupe. */
.recherche-image[b-5tg7183qck] {
    display: block;
    aspect-ratio: 4 / 5;
    padding: 5px;
    background: var(--ivory);
    border: 3px double var(--gold);
    border-radius: 50% 50% 0 0 / 26% 26% 0 0;
    overflow: hidden;
}
.recherche-image img[b-5tg7183qck] {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    object-fit: cover;
    object-position: 64% 50%;
    border-radius: 50% 50% 0 0 / 25% 25% 0 0;
}

/* ---------- Formulaire ---------- */
.recherche-etiquette[b-5tg7183qck] {
    display: block;
    margin: 0 0 0.55rem;
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-soft);
}
.recherche-ligne[b-5tg7183qck] {
    display: flex;
    gap: 10px;
}
/* Le dessin du champ (bord en or foncé, filet d'or intérieur, focus) vient de .form-control (app.css). */
.recherche-champ[b-5tg7183qck] {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 52px;
    padding: 0.7rem 1rem;
    font-size: 1.1rem;
}
/* La croix d'effacement du champ : à l'encre navy, et non le bleu du navigateur. */
.recherche-champ[b-5tg7183qck]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    margin-left: 10px;
    background: var(--navy);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2 2 12 12M12 2 2 12' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2 2 12 12M12 2 2 12' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E") center / contain no-repeat;
    cursor: pointer;
}
.recherche-bouton[b-5tg7183qck] {
    flex: 0 0 auto;
    min-height: 52px;
    padding: 0 1.6rem;
}

.recherche-exemples[b-5tg7183qck] {
    margin: 0.9rem 0 0;
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: 0.98rem;
    line-height: 1.9;
    color: var(--ink-soft);
}
/* inline-block : Blazor retire les espaces entre les liens du @foreach ; sans lui, aucune coupure
   de ligne possible entre les exemples, et le dernier déborde à 320 px. */
.exemple[b-5tg7183qck] {
    display: inline-block;
    margin: 0 0.5em 0 0.15em;
    white-space: nowrap;
    color: var(--navy);
    text-decoration: underline 1px var(--gold);
    text-underline-offset: 4px;
    transition: text-decoration-color 0.2s;
}
.exemple:hover[b-5tg7183qck] {
    color: var(--navy);
    text-decoration-color: var(--rubrique);
}
.exemple:focus-visible[b-5tg7183qck] {
    outline: 2px solid var(--navy);
    outline-offset: 3px;
}

/* ---------- Résultats ---------- */
.resultats[b-5tg7183qck] { margin-top: 3rem; }
.resultats-etat[b-5tg7183qck] {
    margin: 0 0 1.1rem;
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: 1.15rem;
    color: var(--ink-soft);
}
/* Vide, la zone d'annonce reste dans l'arbre d'accessibilité : le nombre de résultats sera lu. */
.resultats-etat:empty[b-5tg7183qck] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    overflow: hidden;
    clip-path: inset(50%);
}
.resultats-etat strong[b-5tg7183qck] {
    font-style: normal;
    font-weight: 400;
    color: var(--rubrique);
}

.resultats-liste[b-5tg7183qck] {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--filet);
}
.resultat[b-5tg7183qck] {
    position: relative;
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 22px;
    padding: 1.3rem 0;
    border-bottom: 1px solid var(--filet);
}
/* Vignette à filet d'or simple, comme les listes d'articles de l'accueil et des mots-clés. */
.resultat img[b-5tg7183qck] {
    display: block;
    width: 72px;
    height: 72px;
    margin: 0.3rem 0 0;
    padding: 0;
    object-fit: cover;
    background: none;
    border: 1px solid var(--gold);
    border-radius: 0;
    box-sizing: border-box;
}
/* Premier résultat ajouté par « Afficher plus » : il reçoit le focus (tabindex=-1).
   Contour au clavier seulement ; sélecteur assez précis pour passer devant une règle commune des cibles d'ancre. */
.resultats-liste > .resultat:focus[b-5tg7183qck] { outline: none; }
.resultats-liste > .resultat:focus-visible[b-5tg7183qck] {
    outline: 2px solid var(--navy);
    outline-offset: 3px;
}
.resultat-titre[b-5tg7183qck] {
    margin: 0;
    padding: 0;
    font-family: 'Playfair Display', serif;
    font-weight: 400;
    font-size: 1.3rem;
    line-height: 1.3;
    text-wrap: pretty;
}
.resultat-titre a[b-5tg7183qck] {
    color: var(--navy);
    text-decoration: underline 1px transparent;
    text-underline-offset: 5px;
    transition: text-decoration-color 0.2s;
}
/* Toute la ligne est cliquable ; le nom du lien reste le seul titre. */
.resultat-titre a[b-5tg7183qck]::after {
    content: "";
    position: absolute;
    inset: 0;
}
.resultat:hover .resultat-titre a[b-5tg7183qck],
.resultat-titre a:focus-visible[b-5tg7183qck] { text-decoration-color: var(--gold); }
.resultat-date[b-5tg7183qck] {
    display: block;
    margin: 0.3rem 0 0.45rem;
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    font-size: 0.68rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-soft);
}
/* « 1er » : l'ordinal en exposant et en minuscules, malgré les capitales. */
.ordinal[b-5tg7183qck] {
    font-size: 0.85em;
    line-height: 0;
    letter-spacing: 0.04em;
    text-transform: none;
    vertical-align: 0.45em;
}
.resultat-extrait[b-5tg7183qck] {
    margin: 0;
    max-width: 75ch;
    font-family: 'Lora', serif;
    font-size: 0.98rem;
    line-height: 1.65;
    color: var(--ink-soft);
}
.resultat-extrait mark[b-5tg7183qck] {
    padding: 0 0.1em;
    color: var(--ink);
    background: rgba(201, 165, 90, 0.3);
}

.resultats-plus[b-5tg7183qck] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.9rem;
    margin-top: 2.5rem;
}
.resultats-plus .btn[b-5tg7183qck] { min-height: 48px; padding: 0.8rem 2.2rem; }
.resultats-compte[b-5tg7183qck] {
    margin: 0;
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: 0.95rem;
    color: var(--ink-soft);
}

.aucun p[b-5tg7183qck] {
    margin: 0 0 0.6rem;
    font-family: 'Lora', serif;
    color: var(--ink);
}
.aucun-themes[b-5tg7183qck] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem 1.4rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.aucun-themes a[b-5tg7183qck] {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: 1.08rem;
    color: var(--navy);
    text-decoration: underline 1px var(--gold);
    text-underline-offset: 5px;
}
.aucun-themes a:hover[b-5tg7183qck] { text-decoration-color: var(--rubrique); }

/* ---------- Téléphone ---------- */
@media (max-width: 767.98px) {
    .recherche-tete[b-5tg7183qck] { grid-template-columns: minmax(0, 1fr); }
    .recherche-image[b-5tg7183qck] { display: none; }
    .recherche-ligne[b-5tg7183qck] { flex-direction: column; }
    .recherche-bouton[b-5tg7183qck] { width: 100%; }
    .resultats[b-5tg7183qck] { margin-top: 2.25rem; }
    .resultat[b-5tg7183qck] {
        grid-template-columns: 56px minmax(0, 1fr);
        gap: 14px;
        padding: 1.1rem 0;
    }
    .resultat img[b-5tg7183qck] { width: 56px; height: 56px; }
    .resultat-titre[b-5tg7183qck] { font-size: 1.12rem; }
    .resultat-extrait[b-5tg7183qck] { font-size: 0.92rem; }
    .resultats-plus .btn[b-5tg7183qck] { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .recherche *[b-5tg7183qck] { transition: none !important; }
}