/* ===== style.css ===== */
/* =============================================================
   THEOLOGIA REFORMATA — STYLES GLOBAUX
   Direction esthétique : éditorial-académique
   Inspiration : reliures patristiques, éditions critiques (Cerf, Brill)
   ============================================================= */

/* --- 1. RESET & BOX-SIZING --- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; font-size: clamp(17px, 1rem + 0.2vw, 19px); }
body, h1, h2, h3, h4, h5, h6, p, ul, ol, figure, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; }

/* --- 2. VARIABLES --- */
:root {
    /* Palette — encre, vélin, sanguine, sapin */
    --encre:        #1a1a1a;
    --encre-doux:   #2c2c2c;
    --velin:        #f5f1e8;
    --velin-clair:  #faf6ed;
    --sanguine:     #8b2c2c;
    --sanguine-vif: #a83434;
    --sapin:        #2d4a3e;
    --sapin-clair:  #3d6253;
    --or:           #b08d57;
    --or-pale:      #d4b783;
    --gris:         #6b6b6b;
    --gris-clair:   #999;
    --gris-tres-clair: #d8d3c4;
    --bordure:      #c9c2b0;

    /* Typographie */
    --serif-titre:  'Cormorant Garamond', 'EB Garamond', Garamond, 'Times New Roman', serif;
    --serif-texte:  'Crimson Text', 'EB Garamond', Georgia, 'Times New Roman', serif;
    --sans-ui:      -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, sans-serif;
    --grec:         'SBL Greek', 'Cardo', 'New Athena Unicode', 'Times New Roman', serif;
    --hebreu:       'SBL Hebrew', 'Ezra SIL', 'Cardo', 'Times New Roman', serif;
    --syriaque:     'Estrangelo Edessa', 'Serto Jerusalem', serif;

    /* Échelle modulaire (1.25 minor third) */
    --texte-xs:     0.88rem;
    --texte-sm:     0.94rem;
    --texte-base:   1rem;
    --texte-md:     1.12rem;
    --texte-lg:     1.4rem;
    --texte-xl:     1.8rem;
    --texte-2xl:    2.35rem;
    --texte-3xl:    3.1rem;

    /* Espacement */
    --espace-1:     0.25rem;
    --espace-2:     0.5rem;
    --espace-3:     0.75rem;
    --espace-4:     1rem;
    --espace-6:     1.5rem;
    --espace-8:     2rem;
    --espace-12:    3rem;
    --espace-16:    4rem;

    /* Layout */
    --largeur-max:  1280px;
    --largeur-texte: 72ch;
    --largeur-nav:  280px;

    /* Effets */
    --ombre-douce:  0 1px 3px rgba(26, 26, 26, 0.06), 0 1px 2px rgba(26, 26, 26, 0.04);
    --ombre-medium: 0 4px 12px rgba(26, 26, 26, 0.08), 0 2px 4px rgba(26, 26, 26, 0.04);
    --ombre-forte:  0 12px 32px rgba(26, 26, 26, 0.12), 0 4px 12px rgba(26, 26, 26, 0.06);
    --transition:   0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- 3. TYPOGRAPHIE DE BASE --- */
body {
    font-family: var(--serif-texte);
    font-size: var(--texte-base);
    line-height: 1.7;
    color: var(--encre);
    background: var(--velin);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "kern" 1, "liga" 1, "onum" 1;
}

h1, h2, h3, h4 {
    font-family: var(--serif-titre);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--encre);
}

h1 { font-size: var(--texte-3xl); }
h2 { font-size: var(--texte-2xl); }
h3 { font-size: var(--texte-xl); }
h4 { font-size: var(--texte-lg); font-weight: 700; }

p { margin-bottom: var(--espace-4); max-width: var(--largeur-texte); }

strong { font-weight: 700; color: var(--encre); }
em { font-style: italic; }

/* Polices spécialisées par lang */
:lang(grc), .grec     { font-family: var(--grec); }
:lang(he), .hebreu   { font-family: var(--hebreu); direction: rtl; unicode-bidi: embed; }
:lang(syc), .syriaque{ font-family: var(--syriaque); direction: rtl; unicode-bidi: embed; }
:lang(la)            { font-style: italic; }

/* --- 4. LIENS --- */
a {
    color: var(--sanguine);
    transition: color var(--transition);
    border-bottom: 1px solid transparent;
}
a:hover, a:focus-visible {
    color: var(--sanguine-vif);
    border-bottom-color: currentColor;
}
a:focus-visible {
    outline: 2px solid var(--or);
    outline-offset: 2px;
    border-radius: 2px;
}

/* --- 5. LAYOUT GLOBAL --- */
.layout {
    display: grid;
    grid-template-columns: var(--largeur-nav) 1fr;
    min-height: 100vh;
}

.contenu-principal {
    padding: var(--espace-12) var(--espace-16);
    max-width: 100%;
    overflow-x: hidden;
}

.bandeau-page {
    border-bottom: 1px solid var(--bordure);
    padding-bottom: var(--espace-8);
    margin-bottom: var(--espace-12);
}

.bandeau-page .surtitre {
    font-family: var(--sans-ui);
    font-size: var(--texte-xs);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--sanguine);
    margin-bottom: var(--espace-3);
    font-weight: 600;
}

.bandeau-page h1 {
    font-size: var(--texte-3xl);
    font-weight: 500;
    letter-spacing: -0.02em;
    margin-bottom: var(--espace-3);
}

.bandeau-page .sous-titre {
    font-family: var(--serif-titre);
    font-style: italic;
    font-size: var(--texte-lg);
    color: var(--gris);
    max-width: 60ch;
}

/* --- 6. NAVIGATION LATÉRALE --- */
.nav-laterale {
    background: var(--encre);
    color: var(--velin);
    height: 100vh;
    position: sticky;
    top: 0;
    overflow-y: auto;
    padding: var(--espace-8) var(--espace-6);
    border-right: 4px solid var(--or);
    scrollbar-width: thin;
    scrollbar-color: var(--gris) transparent;
}

.nav-laterale::-webkit-scrollbar { width: 6px; }
.nav-laterale::-webkit-scrollbar-thumb { background: var(--gris); border-radius: 3px; }

.nav-marque {
    margin-bottom: var(--espace-12);
    padding-bottom: var(--espace-6);
    border-bottom: 1px solid rgba(245, 241, 232, 0.15);
}

.nav-marque .croix {
    font-family: var(--serif-titre);
    font-size: var(--texte-2xl);
    color: var(--or);
    line-height: 1;
}

.nav-marque .titre {
    font-family: var(--serif-titre);
    font-size: var(--texte-lg);
    font-weight: 500;
    letter-spacing: 0.02em;
    margin-top: var(--espace-2);
    color: var(--velin);
}

.nav-marque .sous-titre {
    font-family: var(--sans-ui);
    font-size: var(--texte-xs);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--or-pale);
    margin-top: var(--espace-1);
}

.nav-section {
    margin-bottom: var(--espace-8);
}

.nav-section h3 {
    font-family: var(--sans-ui);
    font-size: var(--texte-xs);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--or-pale);
    margin-bottom: var(--espace-3);
    padding-bottom: var(--espace-2);
    border-bottom: 1px solid rgba(176, 141, 87, 0.25);
    font-weight: 600;
}

.nav-section ul li {
    margin-bottom: var(--espace-1);
}

.nav-section ul a {
    display: flex;
    align-items: center;
    gap: var(--espace-3);
    padding: var(--espace-2) var(--espace-3);
    color: rgba(245, 241, 232, 0.85);
    font-family: var(--serif-texte);
    font-size: var(--texte-sm);
    line-height: 1.4;
    border-radius: 2px;
    border-bottom: none;
    transition: all var(--transition);
}

.nav-section ul a:hover,
.nav-section ul a:focus-visible {
    background: rgba(245, 241, 232, 0.08);
    color: var(--velin);
    padding-left: var(--espace-4);
}

.nav-section ul a.actif {
    background: rgba(176, 141, 87, 0.15);
    color: var(--or-pale);
    border-left: 2px solid var(--or);
    padding-left: calc(var(--espace-3) - 2px);
}

.nav-section .glyphe {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5em;
    text-align: center;
    color: var(--or);
    font-size: var(--texte-base);
    flex-shrink: 0;
}

.nav-section .badge-new {
    margin-left: auto;
    font-family: var(--sans-ui);
    font-size: var(--texte-xs);
    background: var(--sanguine);
    color: var(--velin);
    padding: 1px 6px;
    border-radius: 2px;
    letter-spacing: 0.1em;
    font-weight: 700;
}

/* Barre de progression dans la nav */
.nav-progression {
    margin-top: auto;
    padding-top: var(--espace-6);
    border-top: 1px solid rgba(245, 241, 232, 0.15);
}

.nav-progression .label {
    font-family: var(--sans-ui);
    font-size: var(--texte-xs);
    color: var(--or-pale);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    margin-bottom: var(--espace-2);
    display: block;
}

.nav-progression .piste {
    height: 4px;
    background: rgba(245, 241, 232, 0.15);
    border-radius: 2px;
    overflow: hidden;
}

.nav-progression .barre {
    height: 100%;
    background: linear-gradient(90deg, var(--or) 0%, var(--or-pale) 100%);
    border-radius: 2px;
    transition: width 0.6s ease;
}

.nav-progression .pct {
    font-family: var(--sans-ui);
    font-size: var(--texte-xs);
    color: var(--gris-tres-clair);
    margin-top: var(--espace-2);
    display: block;
}

/* --- 7. PIED DE PAGE --- */
.pied-page {
    border-top: 1px solid var(--bordure);
    margin-top: var(--espace-16);
    padding: var(--espace-8) 0 var(--espace-6);
    color: var(--gris);
    font-size: var(--texte-sm);
    line-height: 1.5;
}

.pied-page p {
    margin-bottom: var(--espace-2);
    max-width: none;
}

.pied-page em {
    color: var(--sanguine);
}

/* --- 8. RESPONSIVE --- */
@media (max-width: 900px) {
    .layout { grid-template-columns: 1fr; }
    .nav-laterale {
        position: static;
        height: auto;
        border-right: none;
        border-bottom: 4px solid var(--or);
        padding: var(--espace-6) var(--espace-4);
    }
    .contenu-principal {
        padding: var(--espace-8) var(--espace-4);
    }
    h1 { font-size: var(--texte-2xl); }
    h2 { font-size: var(--texte-xl); }
}

@media (max-width: 600px) {
    .bandeau-page h1 { font-size: var(--texte-2xl); }
    .bandeau-page .sous-titre { font-size: var(--texte-base); }
}

/* --- 9. UTILITAIRES --- */
.lecteur-seul {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0);
    white-space: nowrap; border: 0;
}

.bouton-saut {
    position: absolute;
    top: -40px;
    left: var(--espace-4);
    background: var(--sanguine);
    color: var(--velin);
    padding: var(--espace-2) var(--espace-4);
    z-index: 100;
    transition: top var(--transition);
}
.bouton-saut:focus { top: var(--espace-2); }

/* --- 10. SÉLECTEUR DE LANGUE --- */
.selecteur-langue {
    margin: var(--espace-4) 0 var(--espace-6);
    padding: var(--espace-4) var(--espace-3);
    border: 1px solid rgba(176, 141, 87, 0.2);
    border-radius: 3px;
    background: rgba(255,255,255,0.03);
}

.langue-label {
    display: block;
    font-family: var(--sans-ui);
    font-size: var(--texte-xs);
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--or-pale);
    margin-bottom: var(--espace-3);
    font-weight: 600;
}

.langue-boutons {
    display: flex;
    gap: var(--espace-2);
    flex-wrap: wrap;
}

.langue-btn {
    font-family: var(--sans-ui);
    font-size: var(--texte-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    padding: var(--espace-1) var(--espace-3);
    border: 1px solid rgba(176, 141, 87, 0.3);
    border-radius: 2px;
    color: rgba(245, 241, 232, 0.6);
    background: transparent;
    cursor: pointer;
    transition: all var(--transition);
}

.langue-btn:hover {
    border-color: var(--or);
    color: var(--or-pale);
    background: rgba(176, 141, 87, 0.08);
}

.langue-btn.actif {
    border-color: var(--or);
    color: var(--encre);
    background: var(--or);
    font-weight: 700;
}

.langue-btn:focus-visible {
    outline: 2px solid var(--or);
    outline-offset: 2px;
}

/* --- 11. INDICATEURS DE NIVEAU PARCOURS --- */
.niveau-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--espace-2);
    font-family: var(--sans-ui);
    font-size: var(--texte-xs);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: var(--espace-1) var(--espace-3);
    border-radius: 2px;
    margin-bottom: var(--espace-4);
}

.niveau-propedeutique { background: #e8f4e8; color: #2d6a2d; border: 1px solid #a8d5a8; }
.niveau-licence       { background: #e8eef8; color: #2d4a8a; border: 1px solid #a8c0e0; }
.niveau-maitrise      { background: #f8f0e8; color: #8a4a1a; border: 1px solid #d4a878; }
.niveau-doctorat      { background: #f0e8f8; color: #5a2d8a; border: 1px solid #c0a0d8; }
.niveau-postdoc       { background: #1a1a1a; color: var(--or-pale); border: 1px solid var(--or); }

/* --- 12. CARTE DE MODULE PARCOURS --- */
.parcours-grille {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--espace-6);
    margin: var(--espace-8) 0;
}

.parcours-carte {
    border: 1px solid var(--bordure);
    border-radius: 4px;
    padding: var(--espace-6);
    background: var(--velin-clair);
    transition: box-shadow var(--transition);
}

.parcours-carte:hover {
    box-shadow: var(--ombre-medium);
}

.parcours-carte .carte-niveau {
    font-family: var(--sans-ui);
    font-size: var(--texte-xs);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--sanguine);
    margin-bottom: var(--espace-2);
    font-weight: 600;
}

.parcours-carte h3 {
    font-size: var(--texte-lg);
    margin-bottom: var(--espace-3);
}

.parcours-carte p {
    font-size: var(--texte-sm);
    color: var(--gris);
    margin-bottom: var(--espace-4);
}

.parcours-carte .carte-meta {
    display: flex;
    gap: var(--espace-3);
    flex-wrap: wrap;
    font-family: var(--sans-ui);
    font-size: var(--texte-xs);
    color: var(--gris-clair);
}


/* ===== modules.css ===== */
/* =============================================================
   THEOLOGIA REFORMATA — STYLES DES MODULES
   ============================================================= */

/* --- 1. ONGLETS HTML/CSS PUR (radio buttons) --- */
.onglets {
    margin: var(--espace-8) 0;
}

.onglets input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.onglets-barre {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    border-bottom: 2px solid var(--encre);
    margin-bottom: 0;
}

.onglets-barre label {
    padding: var(--espace-3) var(--espace-6);
    font-family: var(--sans-ui);
    font-size: var(--texte-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--gris);
    background: transparent;
    cursor: pointer;
    border: 1px solid transparent;
    border-bottom: none;
    transition: all var(--transition);
    user-select: none;
    position: relative;
    top: 1px;
}

.onglets-barre label:hover {
    color: var(--encre);
    background: rgba(176, 141, 87, 0.08);
}

.onglet-contenu {
    display: block;
    padding: var(--espace-8) 0;
    animation: apparition 0.3s ease;
}

@keyframes apparition {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Sélecteurs frères : afficher l'onglet actif et styliser le label */
.onglets input[type="radio"]:checked + label {
    color: var(--encre);
    background: var(--velin);
    border-color: var(--encre);
    border-bottom-color: var(--velin);
}

/* Pattern : 6 onglets max par module */
#tab-1-1:checked ~ .onglets-corps #c-1-1,
#tab-1-2:checked ~ .onglets-corps #c-1-2,
#tab-1-3:checked ~ .onglets-corps #c-1-3,
#tab-1-4:checked ~ .onglets-corps #c-1-4,
#tab-1-5:checked ~ .onglets-corps #c-1-5,
#tab-1-6:checked ~ .onglets-corps #c-1-6,
#tab-2-1:checked ~ .onglets-corps #c-2-1,
#tab-2-2:checked ~ .onglets-corps #c-2-2,
#tab-2-3:checked ~ .onglets-corps #c-2-3,
#tab-2-4:checked ~ .onglets-corps #c-2-4,
#tab-2-5:checked ~ .onglets-corps #c-2-5,
#tab-2-6:checked ~ .onglets-corps #c-2-6,
#tab-3-1:checked ~ .onglets-corps #c-3-1,
#tab-3-2:checked ~ .onglets-corps #c-3-2,
#tab-3-3:checked ~ .onglets-corps #c-3-3,
#tab-3-4:checked ~ .onglets-corps #c-3-4,
#tab-3-5:checked ~ .onglets-corps #c-3-5,
#tab-4-1:checked ~ .onglets-corps #c-4-1,
#tab-4-2:checked ~ .onglets-corps #c-4-2,
#tab-4-3:checked ~ .onglets-corps #c-4-3,
#tab-4-4:checked ~ .onglets-corps #c-4-4,
#tab-5-1:checked ~ .onglets-corps #c-5-1,
#tab-5-2:checked ~ .onglets-corps #c-5-2,
#tab-5-3:checked ~ .onglets-corps #c-5-3,
#tab-5-4:checked ~ .onglets-corps #c-5-4 {
    display: block;
}

/* --- 2. SECTION TITRES & STRUCTURE --- */
.section-module {
    margin-bottom: var(--espace-12);
}

.section-module > h2 {
    font-size: var(--texte-2xl);
    margin-bottom: var(--espace-2);
    color: var(--encre);
    font-weight: 500;
}

.section-module > .surtitre {
    font-family: var(--sans-ui);
    font-size: var(--texte-xs);
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--sanguine);
    margin-bottom: var(--espace-2);
    font-weight: 600;
}

.section-module > .sous-titre-module {
    font-family: var(--serif-titre);
    font-style: italic;
    font-size: var(--texte-md);
    color: var(--gris);
    margin-bottom: var(--espace-6);
    max-width: 70ch;
}

h3.tiret-rouge::before {
    content: "";
    display: inline-block;
    width: 24px;
    height: 2px;
    background: var(--sanguine);
    vertical-align: middle;
    margin-right: var(--espace-3);
    margin-bottom: 4px;
}

/* --- 3. ENCARTS / BOÎTES --- */
.boite {
    background: var(--velin-clair);
    border: 1px solid var(--bordure);
    border-radius: 2px;
    padding: var(--espace-6);
    margin: var(--espace-6) 0;
    box-shadow: var(--ombre-douce);
}

.boite-titre {
    font-family: var(--serif-titre);
    font-size: var(--texte-lg);
    font-weight: 600;
    color: var(--encre);
    margin-bottom: var(--espace-3);
    padding-bottom: var(--espace-2);
    border-bottom: 1px solid var(--bordure);
}

.boite p:last-child { margin-bottom: 0; }

/* Boîtes confessionnelles */
.boite-conf {
    border-left: 4px solid;
    padding: var(--espace-6);
    margin: var(--espace-4) 0;
    background: var(--velin-clair);
}

.boite-protestant { border-left-color: var(--sanguine); }
.boite-orthodoxe  { border-left-color: var(--sapin); }
.boite-catholique { border-left-color: var(--or); }

.boite-conf .marque-conf {
    font-family: var(--sans-ui);
    font-size: var(--texte-xs);
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-weight: 700;
    margin-bottom: var(--espace-3);
    display: flex;
    align-items: center;
    gap: var(--espace-2);
}

.boite-protestant .marque-conf { color: var(--sanguine); }
.boite-orthodoxe  .marque-conf { color: var(--sapin); }
.boite-catholique .marque-conf { color: var(--or); }

.boite-conf .marque-conf .symbole {
    font-family: var(--serif-titre);
    font-size: var(--texte-md);
}

/* Trio confessionnel — 3 boîtes côte à côte */
.trio-conf {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--espace-4);
    margin: var(--espace-6) 0;
}

@media (max-width: 900px) {
    .trio-conf { grid-template-columns: 1fr; }
}

/* --- 4. CITATIONS BIBLIQUES & PATRISTIQUES --- */
blockquote.citation {
    border-left: 3px solid var(--sanguine);
    padding: var(--espace-4) var(--espace-6);
    margin: var(--espace-6) 0;
    background: linear-gradient(90deg, rgba(139, 44, 44, 0.04), transparent);
    font-family: var(--serif-titre);
    font-style: italic;
    font-size: var(--texte-md);
    line-height: 1.6;
    color: var(--encre-doux);
}

blockquote.citation cite {
    display: block;
    font-family: var(--sans-ui);
    font-style: normal;
    font-size: var(--texte-xs);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--sanguine);
    margin-top: var(--espace-3);
    font-weight: 600;
}

blockquote.citation cite::before {
    content: "—— ";
    color: var(--gris-clair);
}

/* Verset biblique — encadré spécifique */
.verset {
    background: var(--velin-clair);
    border: 1px solid var(--bordure);
    border-left: 4px solid var(--or);
    padding: var(--espace-4) var(--espace-6);
    margin: var(--espace-4) 0;
    font-family: var(--serif-titre);
    font-style: italic;
    color: var(--encre-doux);
    border-radius: 2px;
}

.verset .ref {
    display: block;
    font-style: normal;
    font-family: var(--sans-ui);
    font-size: var(--texte-xs);
    color: var(--or);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    margin-top: var(--espace-2);
    font-weight: 700;
}

/* --- 5. TABLEAUX COMPARATIFS --- */
.tableau-wrap {
    overflow-x: auto;
    margin: var(--espace-6) 0;
    border: 1px solid var(--bordure);
    border-radius: 2px;
    box-shadow: var(--ombre-douce);
    background: var(--velin-clair);
}

table.tableau-comparatif {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--texte-sm);
    line-height: 1.55;
    background: var(--velin-clair);
}

table.tableau-comparatif thead {
    background: var(--encre);
    color: var(--velin);
}

table.tableau-comparatif thead th {
    padding: var(--espace-4) var(--espace-4);
    text-align: left;
    font-family: var(--sans-ui);
    font-size: var(--texte-xs);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-weight: 600;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
}

table.tableau-comparatif thead th:last-child { border-right: none; }

table.tableau-comparatif tbody td,
table.tableau-comparatif tbody th {
    padding: var(--espace-4);
    border-bottom: 1px solid var(--bordure);
    vertical-align: top;
    border-right: 1px solid var(--bordure);
}

table.tableau-comparatif tbody td:last-child,
table.tableau-comparatif tbody th:last-child { border-right: none; }

table.tableau-comparatif tbody tr:last-child td,
table.tableau-comparatif tbody tr:last-child th { border-bottom: none; }

table.tableau-comparatif tbody tr:hover {
    background: rgba(176, 141, 87, 0.04);
}

table.tableau-comparatif tbody th {
    font-family: var(--serif-titre);
    font-weight: 600;
    color: var(--encre);
    background: rgba(176, 141, 87, 0.06);
    font-size: var(--texte-base);
    width: 22%;
}

/* Couleurs de colonne pour le tableau tripartite */
table.tableau-comparatif col.col-protestant { background: rgba(139, 44, 44, 0.03); }
table.tableau-comparatif col.col-orthodoxe  { background: rgba(45, 74, 62, 0.03); }
table.tableau-comparatif col.col-catholique { background: rgba(176, 141, 87, 0.03); }

/* Tableau des binyanim et déclinaisons */
table.tableau-grammatical {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--texte-sm);
    margin: var(--espace-4) 0;
    background: var(--velin-clair);
    border: 1px solid var(--bordure);
}

table.tableau-grammatical th,
table.tableau-grammatical td {
    padding: var(--espace-3) var(--espace-4);
    border: 1px solid var(--bordure);
    text-align: left;
    vertical-align: middle;
}

table.tableau-grammatical thead {
    background: var(--encre);
    color: var(--velin);
}

table.tableau-grammatical thead th {
    font-family: var(--sans-ui);
    font-size: var(--texte-xs);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 600;
}

table.tableau-grammatical tbody th:first-child {
    background: rgba(176, 141, 87, 0.08);
    font-family: var(--sans-ui);
    font-weight: 600;
    color: var(--encre);
    width: 18%;
}

/* --- 6. STATISTIQUES & CARTES --- */
.stats-grille {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--espace-4);
    margin: var(--espace-6) 0;
}

.stat-carte {
    background: var(--velin-clair);
    border: 1px solid var(--bordure);
    padding: var(--espace-6);
    text-align: center;
    border-radius: 2px;
    transition: transform var(--transition), box-shadow var(--transition);
}

.stat-carte:hover {
    transform: translateY(-2px);
    box-shadow: var(--ombre-medium);
}

.stat-valeur {
    display: block;
    font-family: var(--serif-titre);
    font-size: var(--texte-3xl);
    font-weight: 600;
    color: var(--sanguine);
    line-height: 1;
}

.stat-label {
    display: block;
    font-family: var(--sans-ui);
    font-size: var(--texte-xs);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--gris);
    margin-top: var(--espace-2);
    font-weight: 600;
}

/* --- 7. CHRONOLOGIE --- */
.chronologie {
    margin: var(--espace-8) 0;
    border-left: 2px solid var(--or);
    padding-left: var(--espace-8);
}

.chronologie-entree {
    position: relative;
    margin-bottom: var(--espace-8);
    padding-bottom: var(--espace-4);
}

.chronologie-entree::before {
    content: "";
    position: absolute;
    left: calc(var(--espace-8) * -1 - 7px);
    top: 8px;
    width: 12px;
    height: 12px;
    background: var(--velin);
    border: 2px solid var(--sanguine);
    border-radius: 50%;
    box-shadow: 0 0 0 4px var(--velin);
}

.chronologie-date {
    font-family: var(--sans-ui);
    font-size: var(--texte-xs);
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-weight: 700;
    color: var(--sanguine);
    margin-bottom: var(--espace-2);
}

.chronologie-titre {
    font-family: var(--serif-titre);
    font-size: var(--texte-lg);
    font-weight: 600;
    margin-bottom: var(--espace-2);
}

/* --- 8. FLASHCARDS --- */
.flashcard {
    background: var(--velin-clair);
    border: 1px solid var(--bordure);
    border-radius: 4px;
    padding: var(--espace-8);
    text-align: center;
    margin: var(--espace-6) 0;
    box-shadow: var(--ombre-douce);
    min-height: 240px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: all var(--transition);
}

.flashcard-question {
    font-family: var(--serif-titre);
    font-size: var(--texte-xl);
    color: var(--encre);
    margin-bottom: var(--espace-4);
}

.flashcard-instruction {
    font-family: var(--sans-ui);
    font-size: var(--texte-xs);
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--gris-clair);
    margin-top: var(--espace-4);
}

.flashcard-reponse {
    display: block;
    padding-top: var(--espace-4);
    border-top: 1px dashed var(--bordure);
    margin-top: var(--espace-4);
    font-style: italic;
    color: var(--encre-doux);
    text-align: left;
}

.flashcard.revelee .flashcard-reponse { display: block; }
.flashcard.revelee .flashcard-instruction { display: none; }

.flashcard-actions {
    display: flex;
    gap: var(--espace-3);
    margin-top: var(--espace-6);
    justify-content: center;
    flex-wrap: wrap;
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: var(--espace-2);
    padding: var(--espace-3) var(--espace-6);
    font-family: var(--sans-ui);
    font-size: var(--texte-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    border: 1px solid var(--encre);
    background: var(--velin);
    color: var(--encre);
    cursor: pointer;
    transition: all var(--transition);
    border-radius: 2px;
}

.btn:hover:not(:disabled) {
    background: var(--encre);
    color: var(--velin);
}

.btn-primaire {
    background: var(--sanguine);
    color: var(--velin);
    border-color: var(--sanguine);
}
.btn-primaire:hover:not(:disabled) {
    background: var(--sanguine-vif);
    border-color: var(--sanguine-vif);
}

.btn-succes {
    background: var(--sapin);
    color: var(--velin);
    border-color: var(--sapin);
}

.btn:disabled { opacity: 0.6; cursor: default; }

/* --- 9. ANALYSE MOT-À-MOT (textes annotés) --- */
.texte-annote {
    background: var(--velin-clair);
    border: 1px solid var(--bordure);
    border-radius: 2px;
    padding: var(--espace-6);
    margin: var(--espace-6) 0;
}

.texte-source {
    font-size: var(--texte-2xl);
    line-height: 1.8;
    margin-bottom: var(--espace-6);
    text-align: center;
    color: var(--encre);
    padding-bottom: var(--espace-4);
    border-bottom: 1px solid var(--bordure);
}

.analyse-mots {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--espace-3);
    margin: var(--espace-4) 0;
}

.mot-analyse {
    background: var(--velin);
    border: 1px solid var(--bordure);
    padding: var(--espace-3);
    border-radius: 2px;
    text-align: center;
}

.mot-original {
    font-size: var(--texte-md);
    font-weight: 600;
    color: var(--encre);
    display: block;
    margin-bottom: var(--espace-1);
}

.mot-translit {
    display: block;
    font-style: italic;
    color: var(--gris);
    font-size: var(--texte-sm);
    margin-bottom: var(--espace-1);
}

.mot-trad {
    display: block;
    font-family: var(--sans-ui);
    font-size: var(--texte-xs);
    color: var(--sanguine);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
}

.traduction-libre {
    margin-top: var(--espace-4);
    padding-top: var(--espace-4);
    border-top: 1px dashed var(--bordure);
    font-family: var(--serif-titre);
    font-style: italic;
    color: var(--encre-doux);
    font-size: var(--texte-md);
}

/* --- 10. NOTES MARGINALES & CRITIQUES --- */
.note-critique {
    background: rgba(176, 141, 87, 0.08);
    border-left: 3px solid var(--or);
    padding: var(--espace-4) var(--espace-6);
    margin: var(--espace-4) 0;
    font-size: var(--texte-sm);
    line-height: 1.55;
    border-radius: 0 2px 2px 0;
}

.note-critique .marque {
    font-family: var(--sans-ui);
    font-size: var(--texte-xs);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-weight: 700;
    color: var(--or);
    margin-bottom: var(--espace-2);
    display: block;
}

/* --- 11. ALPHABETS (cartes de lettres) --- */
.grille-alphabet {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--espace-3);
    margin: var(--espace-6) 0;
}

.lettre-carte {
    background: var(--velin-clair);
    border: 1px solid var(--bordure);
    padding: var(--espace-4);
    border-radius: 2px;
    transition: all var(--transition);
}

.lettre-carte:hover {
    box-shadow: var(--ombre-medium);
    transform: translateY(-1px);
}

.lettre-carte .lettre-grande {
    font-size: 3rem;
    line-height: 1;
    text-align: center;
    color: var(--encre);
    margin-bottom: var(--espace-2);
    font-family: inherit;
}

.lettre-carte .lettre-nom {
    font-family: var(--serif-titre);
    font-size: var(--texte-md);
    font-weight: 600;
    text-align: center;
    color: var(--sanguine);
    margin-bottom: var(--espace-3);
}

.lettre-carte dl {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--espace-1) var(--espace-3);
    font-size: var(--texte-xs);
    margin-bottom: 0;
}

.lettre-carte dt {
    font-family: var(--sans-ui);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
    color: var(--gris);
    font-size: var(--texte-xs);
}

.lettre-carte dd { margin: 0; color: var(--encre); }

.lettre-carte p {
    margin-top: var(--espace-3);
    padding-top: var(--espace-3);
    border-top: 1px dashed var(--bordure);
    font-size: var(--texte-xs);
    color: var(--gris);
    line-height: 1.4;
}

/* --- 12. PROGRESSION DES MODULES (validation) --- */
.module-validation {
    background: linear-gradient(135deg, var(--velin-clair) 0%, var(--velin) 100%);
    border: 2px solid var(--bordure);
    padding: var(--espace-6);
    margin: var(--espace-8) 0;
    text-align: center;
    border-radius: 4px;
}

.module-validation p {
    margin: 0 0 var(--espace-4);
    max-width: none;
    font-style: italic;
    color: var(--encre-doux);
}

/* --- 13. LISTES SOIGNÉES --- */
.liste-elegante {
    list-style: none;
    padding-left: 0;
    margin: var(--espace-4) 0;
}

.liste-elegante li {
    padding-left: var(--espace-6);
    position: relative;
    margin-bottom: var(--espace-2);
    line-height: 1.6;
}

.liste-elegante li::before {
    content: "❦";
    position: absolute;
    left: 0;
    color: var(--or);
    font-size: var(--texte-md);
    line-height: 1.5;
}

.liste-numerotee {
    counter-reset: item;
    list-style: none;
    padding-left: 0;
    margin: var(--espace-4) 0;
}

.liste-numerotee li {
    counter-increment: item;
    padding-left: 3em;
    position: relative;
    margin-bottom: var(--espace-3);
    line-height: 1.6;
}

.liste-numerotee li::before {
    content: counter(item, upper-roman) ".";
    position: absolute;
    left: 0;
    width: 2.5em;
    text-align: right;
    font-family: var(--serif-titre);
    font-weight: 600;
    color: var(--sanguine);
}

/* --- 14. TAGS / FILTRES --- */
.tags-filtres {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espace-2);
    margin: var(--espace-4) 0;
}

.tag {
    display: inline-flex;
    align-items: center;
    gap: var(--espace-1);
    padding: var(--espace-1) var(--espace-3);
    font-family: var(--sans-ui);
    font-size: var(--texte-xs);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    background: rgba(176, 141, 87, 0.1);
    color: var(--encre-doux);
    border: 1px solid var(--bordure);
    border-radius: 12px;
    font-weight: 600;
}

.tag-protestant { background: rgba(139, 44, 44, 0.08); color: var(--sanguine); }
.tag-orthodoxe  { background: rgba(45, 74, 62, 0.08); color: var(--sapin); }
.tag-catholique { background: rgba(176, 141, 87, 0.12); color: #8a6a3e; }


/* ===== sous-modules.css ===== */
/* ============================================================
   sous-modules.css — Theologia Reformata
   Styles pour les sous-modules par livre biblique
   ============================================================ */

.sous-module {
  max-width: 90ch;
  padding: 1.5rem 2rem 4rem;
}

.fil-ariane {
  font-size: 0.875rem;
  color: var(--color-text-muted, #666);
  margin: 0 0 1.5rem 0;
}

.fil-ariane a {
  color: var(--color-link, #1a4a73);
  text-decoration: none;
}

.fil-ariane a:hover {
  text-decoration: underline;
}

.module-header h1 {
  font-size: clamp(1.875rem, 4vw, 2.75rem);
  margin: 0 0 0.75rem;
  line-height: 1.15;
}

.module-header .abreviation {
  font-size: 0.6em;
  font-weight: 400;
  color: var(--color-text-muted, #888);
  font-family: Georgia, serif;
  font-style: italic;
}

.module-header .lead {
  font-size: 1.0625rem;
  color: var(--color-text-muted, #444);
  line-height: 1.6;
  margin: 0 0 2rem;
  max-width: 65ch;
}

.sous-module section {
  margin: 3rem 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-border-soft, #eee);
}

.sous-module section:first-of-type {
  border-top: none;
  padding-top: 0;
}

.sous-module h2 {
  font-size: 1.625rem;
  margin: 0 0 1.25rem;
  color: var(--color-heading, #1a1a1a);
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--color-accent, #7a3b2e);
  display: inline-block;
}

.sous-module h3 {
  font-size: 1.25rem;
  margin: 1.5rem 0 0.75rem;
  color: var(--color-subheading, #333);
}

.sous-module h4 {
  font-size: 1rem;
  margin: 1rem 0 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-accent, #7a3b2e);
}

.sous-module p {
  line-height: 1.7;
  margin: 0 0 1rem;
}

/* Fiche de présentation (auteur, date, destinataires...) */
.fiche-presentation {
  display: grid;
  grid-template-columns: minmax(160px, max-content) 1fr;
  gap: 0.6rem 1.5rem;
  background: var(--color-bg-subtle, #f7f5f0);
  padding: 1.25rem 1.5rem;
  border-left: 4px solid var(--color-accent, #7a3b2e);
  margin: 1rem 0;
}

.fiche-presentation dt {
  font-weight: 600;
  color: var(--color-accent, #7a3b2e);
}

.fiche-presentation dd {
  margin: 0;
  line-height: 1.5;
}

/* Structure littéraire */
.structure-livre {
  list-style: decimal;
  padding-left: 1.5rem;
}

.structure-livre li {
  margin: 0.75rem 0;
  line-height: 1.6;
}

.structure-livre strong {
  color: var(--color-heading, #1a1a1a);
}

.reference-biblique {
  font-family: Georgia, serif;
  font-style: italic;
  font-size: 0.95em;
  color: var(--color-text-muted, #666);
}

.structure-livre p {
  margin: 0.35rem 0 0 0;
  font-size: 0.95rem;
  color: var(--color-text, #444);
}

/* Théologie principale */
.theme-theologique {
  margin: 2rem 0;
  padding: 0 0 0 1.25rem;
  border-left: 3px solid var(--color-border-soft, #ccc);
}

/* Disputes théologiques */
.disputes-theologiques .disputes-intro {
  font-style: italic;
  color: var(--color-text-muted, #555);
  margin-bottom: 2rem;
}

.dispute-theologique {
  margin: 2.5rem 0;
  padding: 1.5rem;
  background: #fbfaf6;
  border-radius: 6px;
  border: 1px solid var(--color-border-soft, #e5e5e5);
  border-top: none !important;
}

.dispute-titre {
  font-size: 1.25rem;
  margin: 0 0 0.5rem;
  color: var(--color-accent, #7a3b2e);
  border-bottom: 1px solid var(--color-border-soft, #ddd);
  padding-bottom: 0.5rem;
}

.dispute-intro {
  margin: 0 0 1.5rem;
  font-style: italic;
  color: var(--color-text-muted, #555);
}

.voix-confessionnelles {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin: 1rem 0;
}

.voix {
  padding: 1rem 1.25rem;
  background: #fff;
  border-left: 4px solid;
  border-radius: 0 4px 4px 0;
}

.voix h4 {
  margin: 0 0 0.5rem;
  font-size: 0.9375rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.voix-position {
  margin: 0;
  line-height: 1.65;
}

/* Couleurs par tradition */
.voix-catholique { border-color: #c4a460; }
.voix-catholique h4 { color: #8a6f33; }

.voix-orthodoxe { border-color: #7a3b2e; }
.voix-orthodoxe h4 { color: #7a3b2e; }

.voix-reformee, .voix-reforme { border-color: #2a5a8a; }
.voix-reformee h4, .voix-reforme h4 { color: #2a5a8a; }

.voix-lutherienne, .voix-lutherien { border-color: #5a4a8a; }
.voix-lutherienne h4, .voix-lutherien h4 { color: #5a4a8a; }

.voix-anglicane, .voix-anglican { border-color: #5a8a4a; }
.voix-anglicane h4, .voix-anglican h4 { color: #4a7a3a; }

.voix-anabaptiste { border-color: #8a5a3b; }
.voix-anabaptiste h4 { color: #6a4527; }

/* Interjection Tryphon */
.tryphon-interjection {
  margin: 0.85rem 0 0;
  padding: 0.65rem 1rem 0.65rem 2.5rem;
  background: #f3ede1;
  border-left: 3px dotted #8a6f33;
  border-radius: 0 4px 4px 0;
  font-size: 0.9375rem;
  position: relative;
}

.tryphon-interjection::before {
  content: "✡";
  position: absolute;
  left: 0.75rem;
  top: 0.65rem;
  color: #8a6f33;
  font-size: 1.1rem;
}

.tryphon-marqueur {
  font-weight: 600;
  color: #6a4527;
  margin-right: 0.4rem;
}

.tryphon-texte {
  font-style: italic;
  color: #444;
}

/* Synthèse */
.dispute-synthese {
  margin: 1.5rem 0 0;
  padding: 1rem 1.25rem;
  background: #f0ece4;
  border-radius: 4px;
  border-left: 4px solid var(--color-accent, #7a3b2e);
}

.dispute-synthese h4 {
  margin: 0 0 0.5rem;
  color: var(--color-accent, #7a3b2e);
}

.dispute-synthese p {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
}

/* Réception historique */
.reception-periode {
  margin: 1.5rem 0;
  padding-left: 1rem;
  border-left: 2px solid var(--color-border-soft, #ccc);
}

/* Bibliographie SBL */
.bibliographie-sbl {
  list-style: none;
  padding: 0;
  font-family: Georgia, 'Times New Roman', serif;
}

.bibliographie-sbl li {
  margin: 0.6rem 0;
  padding-left: 2.5rem;
  text-indent: -2.5rem;
  line-height: 1.55;
  font-size: 0.95rem;
}

.biblio-intro {
  font-size: 0.9375rem;
  color: var(--color-text-muted, #666);
  font-style: italic;
  margin-bottom: 1rem;
}

/* Liens internes */
.liens-croises {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.liens-croises li {
  margin: 0;
}

.liens-croises a {
  display: inline-block;
  padding: 0.45rem 0.9rem;
  background: var(--color-bg-subtle, #f0ece4);
  border: 1px solid var(--color-border-soft, #ddd);
  border-radius: 999px;
  font-size: 0.9rem;
  text-decoration: none;
  color: var(--color-link, #1a4a73);
}

.liens-croises a:hover {
  background: var(--color-accent, #7a3b2e);
  color: #fff;
  border-color: var(--color-accent, #7a3b2e);
}

/* Responsive */
@media (max-width: 768px) {
  .sous-module {
    padding: 1rem 1.25rem 3rem;
  }
  .fiche-presentation {
    grid-template-columns: 1fr;
    gap: 0.25rem 0;
  }
  .fiche-presentation dt {
    margin-top: 0.5rem;
  }
}

/* ============================================================
   CHANTIER O — Grilles d'accès aux sous-modules par livre
   (utilisées dans evangiles.html, epitres-paul.html,
   epitres-catholiques.html)
   ============================================================ */

.cartes-evangiles,
.cartes-sous-modules {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 1.4rem;
  margin: 1.8rem 0 2.4rem;
}

.carte-evangile,
.carte-sous-module {
  display: flex;
  flex-direction: column;
  background: linear-gradient(165deg, #fdfbf7 0%, #f4ede0 100%);
  border: 1px solid #d8c9a8;
  border-radius: 10px;
  padding: 1.1rem 1.2rem 1.3rem;
  text-decoration: none;
  color: #2c2418;
  box-shadow: 0 2px 6px rgba(60, 45, 20, 0.08);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.carte-evangile:hover,
.carte-evangile:focus-visible,
.carte-sous-module:hover,
.carte-sous-module:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 8px 18px rgba(60, 45, 20, 0.16);
  border-color: #a8893f;
  outline: none;
}

.carte-evangile-bandeau,
.carte-sous-module-bandeau {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: 2px solid #a8893f;
  padding-bottom: 0.35rem;
  margin-bottom: 0.6rem;
}

.carte-evangile-numero,
.carte-sous-module-numero {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: #7a5c1e;
  text-transform: uppercase;
}

.carte-evangile-symbole,
.carte-sous-module-symbole {
  font-size: 1.25rem;
  opacity: 0.75;
}

.carte-evangile h3,
.carte-sous-module h3 {
  margin: 0 0 0.2rem;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.45rem;
  color: #4a3415;
}

.carte-evangile-soustitre,
.carte-sous-module-soustitre {
  margin: 0 0 0.7rem;
  font-style: italic;
  font-size: 0.92rem;
  color: #6b5a3e;
  line-height: 1.35;
}

.carte-evangile-fiche,
.carte-sous-module-fiche {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.15rem 0.6rem;
  margin: 0 0 0.75rem;
  font-size: 0.85rem;
}

.carte-evangile-fiche dt,
.carte-sous-module-fiche dt {
  font-weight: 700;
  color: #7a5c1e;
}

.carte-evangile-fiche dd,
.carte-sous-module-fiche dd {
  margin: 0;
  color: #3d3324;
}

.carte-evangile-resume,
.carte-sous-module-resume {
  flex: 1;
  margin: 0 0 0.85rem;
  font-size: 0.9rem;
  line-height: 1.5;
  color: #3d3324;
}

.carte-evangile-cta,
.carte-sous-module-cta {
  align-self: flex-start;
  font-size: 0.88rem;
  font-weight: 600;
  color: #8a6914;
  border-bottom: 1px dotted #8a6914;
  transition: color 0.15s ease;
}

.carte-evangile:hover .carte-evangile-cta,
.carte-sous-module:hover .carte-sous-module-cta {
  color: #5e4607;
}

/* Sous-groupes (corpus paulinien : grandes lettres, captivité, pastorales…) */
.sous-modules-groupe-titre {
  grid-column: 1 / -1;
  margin: 0.8rem 0 -0.4rem;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.18rem;
  font-weight: 700;
  color: #6e5318;
  border-left: 4px solid #a8893f;
  padding-left: 0.65rem;
}

@media (max-width: 640px) {
  .cartes-evangiles,
  .cartes-sous-modules {
    grid-template-columns: 1fr;
  }
}


/* ===== footer-theologia.css ===== */
/* =============================================================
   THEOLOGIA REFORMATA — Footer / colophon styles
   ============================================================= */

.footer-theologia {
    margin-top: 4rem;
    background: linear-gradient(180deg, #5a2828 0%, #3a1818 100%);
    color: #f4ead4;
    padding: 2.5rem 2rem 1.5rem;
    font-family: Georgia, 'EB Garamond', serif;
    font-size: 0.92rem;
    line-height: 1.6;
    border-top: 4px solid #e8a532;
    width: 100%;
    box-sizing: border-box;
}

.footer-theologia-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 2.5rem;
    margin-bottom: 2rem;
}

.footer-colonne h4 {
    font-family: Georgia, serif;
    font-size: 1rem;
    color: #e8a532;
    margin: 0 0 1rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
}

.footer-colonne ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-colonne ul li {
    margin: 0.4rem 0;
}

.footer-colonne ul li a {
    color: #f4ead4;
    text-decoration: none;
    transition: color 0.2s;
    border-bottom: 1px solid transparent;
}

.footer-colonne ul li a:hover {
    color: #e8a532;
    border-bottom-color: #e8a532;
}

.footer-marque .footer-titre {
    font-size: 1.3rem;
    font-weight: bold;
    color: #e8a532;
    margin: 0 0 0.5rem;
    letter-spacing: 0.02em;
}

.footer-marque .footer-slogan {
    font-style: italic;
    margin: 0;
    color: #d4c5a0;
}

.footer-colophon p {
    margin: 0.3rem 0;
}

.footer-petit {
    font-size: 0.82rem;
    color: #c4a880;
}

.footer-petit a {
    color: #e8a532;
    text-decoration: none;
}

.footer-petit a:hover {
    text-decoration: underline;
}

.footer-bas {
    max-width: 1200px;
    margin: 0 auto;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(232, 165, 50, 0.3);
    text-align: center;
}

.footer-bas p {
    margin: 0.3rem 0;
}

@media (max-width: 600px) {
    .footer-theologia {
        padding: 2rem 1rem 1rem;
    }
    .footer-theologia-inner {
        gap: 1.5rem;
    }
}


/* ===== accessibilite-responsive.css ===== */
/* =============================================
   ACCESSIBILITÉ WCAG 2.1 AA + RESPONSIVE RENFORCÉ
   ============================================= */

/* === A. Skip-to-main pour navigation clavier === */
.skip-to-main {
    position: absolute;
    left: -9999px;
    z-index: 9999;
    padding: 0.75rem 1.5rem;
    background: var(--bordeaux, #9b1c1c);
    color: #fff !important;
    text-decoration: none;
    font-weight: 600;
    border-radius: 0 0 8px 8px;
}

.skip-to-main:focus {
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    outline: 3px solid #f0c040;
    outline-offset: 2px;
}

/* === B. Focus visible amélioré pour navigation clavier === */
*:focus-visible {
    outline: 3px solid var(--safran, #e8a532);
    outline-offset: 2px;
    border-radius: 2px;
}

a:focus-visible,
button:focus-visible {
    outline: 3px solid var(--bordeaux, #9b1c1c);
    outline-offset: 2px;
}

/* === C. Contraste : forcer min 4.5:1 sur les textes secondaires === */
.apparat, .citation-bloc, .note-bas-page {
    color: #3a3024; /* contraste 9.4:1 sur fond beige clair */
}

/* === D. Tailles tactiles minimum (44×44 px WCAG 2.5.5) === */
a, button, .flashcard, [role="button"] {
    min-height: 44px;
    display: inline-block;
}

a.tactile-large, button.tactile-large {
    min-height: 48px;
    padding: 0.6rem 1.2rem;
}

/* === E. Tables accessibles avec caption visible === */
.tableau-comparatif caption {
    caption-side: top;
    font-family: Georgia, serif;
    font-size: 0.95rem;
    color: var(--bordeaux, #9b1c1c);
    font-style: italic;
    text-align: left;
    padding: 0.5rem 0;
    font-weight: 600;
}

/* === F. Responsive renforcé : breakpoints structurés === */

/* Mobile portrait : < 480px */
@media (max-width: 480px) {
    body {
        font-size: 16px; /* base accessible */
    }
    
    main.contenu-principal {
        padding: 0.8rem;
    }
    
    h1, .hero-festif h1 {
        font-size: 1.8rem !important;
        line-height: 1.2;
    }
    
    h2 {
        font-size: 1.4rem !important;
    }
    
    h3 {
        font-size: 1.2rem !important;
    }
    
    /* Tableaux : scroll horizontal sur petit écran */
    .tableau-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    /* Flashcards : 1 colonne */
    .flashcards-grille {
        grid-template-columns: 1fr !important;
        padding: 0.8rem;
    }
    
    /* Textes parallèles : empilés */
    .textes-paralleles {
        display: block !important;
    }
    
    .textes-paralleles > div {
        margin-bottom: 1rem;
    }
    
    /* Sommaire en 1 colonne */
    .sommaire-module ol {
        columns: 1 !important;
    }
}

/* Mobile paysage / tablette : 480-768px */
@media (min-width: 481px) and (max-width: 768px) {
    main.contenu-principal {
        padding: 1.2rem;
    }
    
    .flashcards-grille {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
    }
}

/* Tablette grand format / desktop : > 768px */
@media (min-width: 769px) {
    main.contenu-principal {
        padding: 1.5rem 2rem;
        max-width: 980px;
        margin: 0 auto;
    }
}

/* === G. Réduction des animations pour utilisateurs sensibles === */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    
    .flashcard:hover .flashcard-inner,
    .flashcard:focus .flashcard-inner {
        transform: none !important;
    }
}

/* === H. Mode sombre via prefers-color-scheme === */
@media (prefers-color-scheme: dark) {
    /* On garde le thème clair par défaut (théologie = livre ancien),
       mais on s'assure que les contrastes restent acceptables */
    /* Aucune règle ici intentionnellement : le site reste en mode clair par choix éditorial */
}

/* === I. Print styles : impression optimisée === */
@media print {
    .nav-laterale,
    .navigation-haute,
    .sommaire-module,
    .flashcards-grille,
    .module-validation,
    footer {
        display: none !important;
    }
    
    main.contenu-principal {
        max-width: 100% !important;
        padding: 0 !important;
        font-size: 12pt;
        color: #000 !important;
    }
    
    a {
        color: #000 !important;
        text-decoration: none !important;
    }
    
    .citation-bloc, .textes-paralleles {
        page-break-inside: avoid;
    }
    
    h2, h3, h4 {
        page-break-after: avoid;
    }
}

/* === J. Screen reader only : contenu accessible mais non visible === */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}


/* ===== Onglets : mécanisme universel (JS pose .actif) ===== */
.onglets input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.onglet-contenu { display: none; padding-top: var(--espace-6); }
.onglet-contenu.actif { display: block; }
.onglets-barre label.actif { background: var(--velin-clair); color: var(--sanguine); border-color: var(--or); border-bottom-color: var(--velin-clair); }
.onglets-barre label { font-size: var(--texte-sm); }

/* ===== Quiz (extrait des modules, unifié, palette claire) ===== */
.section-quiz{margin-top:var(--espace-12);padding-top:var(--espace-8);border-top:2px solid var(--or)}
.quiz-container{max-width:var(--largeur-texte)}
.quiz-question{display:block}.quiz-question.hidden{display:none}
.quiz-enonce{font-size:var(--texte-md);font-weight:600;margin-bottom:var(--espace-4);line-height:1.5}
.quiz-choix{list-style:none;padding:0;display:flex;flex-direction:column;gap:var(--espace-2)}
.quiz-choix li{padding:var(--espace-3) var(--espace-4);border:1px solid var(--or-pale);border-radius:6px;cursor:pointer;font-size:var(--texte-base);background:var(--velin-clair);transition:all .15s}
.quiz-choix li:hover{border-color:var(--or);background:#fff}
.quiz-choix li.correct{border-color:var(--sapin);background:rgba(45,74,62,.10)}
.quiz-choix li.incorrect{border-color:var(--sanguine);background:rgba(139,44,44,.08)}
.quiz-choix li.disabled{pointer-events:none;opacity:.8}
.quiz-feedback{min-height:1.6em;font-size:var(--texte-sm);margin:var(--espace-3) 0 var(--espace-1);font-style:italic;color:var(--sanguine)}
.quiz-ref{font-size:var(--texte-xs);color:var(--encre-doux);margin-top:var(--espace-2)}
.quiz-nav{display:flex;align-items:center;gap:var(--espace-3);margin-top:var(--espace-6);flex-wrap:wrap}
.quiz-nav button{padding:var(--espace-2) var(--espace-6);border:1px solid var(--or);border-radius:6px;background:var(--velin-clair);color:var(--sanguine);cursor:pointer;font-size:var(--texte-sm);font-family:var(--sans-ui)}
.quiz-nav button:hover:not(:disabled){background:#fff}
.quiz-nav button:disabled{opacity:.4;cursor:default}
.quiz-score{flex:1;text-align:center;font-size:var(--texte-sm)}

/* ===== Fiches biographiques, cartes d'accueil, bandeau de traduction ===== */
.fiche-bio{margin:var(--espace-6) 0}
.fiche-dates{font-size:var(--texte-sm);font-weight:400;color:var(--encre-doux);margin-left:var(--espace-3);font-family:var(--sans-ui)}
.bandeau-traduction{margin:0 0 var(--espace-6);padding:var(--espace-4) var(--espace-6);border:1px solid var(--or);border-left:4px solid var(--sanguine);border-radius:6px;background:var(--velin-clair);font-size:var(--texte-sm)}
.bandeau-traduction strong{display:block;margin-bottom:var(--espace-1);color:var(--sanguine)}
.rubrique-accueil{margin-bottom:var(--espace-12)}
.rubrique-accueil h2{display:flex;align-items:center;gap:var(--espace-3);border-bottom:1px solid var(--or-pale);padding-bottom:var(--espace-3)}
.grille-modules{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--espace-4)}
.carte-module{display:flex;flex-direction:column;gap:var(--espace-2);padding:var(--espace-6);border-radius:10px;background:var(--velin-clair);border:1px solid var(--or-pale);text-decoration:none;color:var(--encre);transition:border-color .15s,transform .15s}
.carte-module:hover{border-color:var(--or);transform:translateY(-2px)}
.carte-glyphe{font-size:1.6rem;color:var(--or)}
.carte-titre{font-size:var(--texte-md);font-weight:700;color:var(--sanguine);line-height:1.35;font-family:var(--serif-titre)}
.carte-desc{font-size:var(--texte-sm);color:var(--encre-doux);line-height:1.55}
.hero-accueil{text-align:center;padding:var(--espace-16) var(--espace-6) var(--espace-12);border-bottom:1px solid var(--or-pale);margin-bottom:var(--espace-12)}
.hero-accueil h1{font-size:var(--texte-3xl);margin-bottom:var(--espace-4)}
.hero-accueil .baseline{font-size:var(--texte-md);color:var(--encre-doux);max-width:640px;margin:0 auto var(--espace-8);line-height:1.6}
.hero-stats{display:flex;justify-content:center;gap:var(--espace-12);flex-wrap:wrap}
.hero-stat .n{display:block;font-size:var(--texte-2xl);color:var(--sanguine);font-weight:700;font-family:var(--serif-titre)}
.hero-stat .l{font-size:var(--texte-xs);color:var(--encre-doux);text-transform:uppercase;letter-spacing:.06em;font-family:var(--sans-ui)}
.accueil-langues{display:flex;justify-content:center;gap:var(--espace-3);margin:var(--espace-12) 0 0;flex-wrap:wrap}
.accueil-langues a{font-size:var(--texte-sm);padding:var(--espace-2) var(--espace-6);border:1px solid var(--or-pale);border-radius:20px;color:var(--encre-doux);text-decoration:none;font-family:var(--sans-ui)}
.accueil-langues a:hover{border-color:var(--or);color:var(--sanguine)}
.croix-hero{font-size:2.4rem;color:var(--or);margin-bottom:var(--espace-4)}
@media (max-width:640px){.grille-modules{grid-template-columns:1fr}}