/* =============================================================
   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: none;
    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: none;
    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: 0.6875rem;
}

.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; }