/* =============================================================
   THEOLOGIA REFORMATA — COUCHE FANTAISISTE
   Direction : cabinet de curiosités théologiques + enluminure
   médiévale rencontre mise en page de revue littéraire.
   
   Ce fichier s'ajoute (ne remplace pas) style.css et modules.css.
   Il enrichit l'esthétique sans compromettre la rigueur.
   ============================================================= */

/* =============================================
   1. POLICES SUPPLÉMENTAIRES (Google Fonts)
   ============================================= */
@import url('https://fonts.googleapis.com/css2?family=Uncial+Antiqua&family=MedievalSharp&family=Cinzel+Decorative:wght@400;700&family=Cormorant+Upright:ital,wght@0,300;0,400;0,500;1,300;1,400&family=Jim+Nightshade&display=swap');

/* =============================================
   2. VARIABLES FANTAISISTES
   ============================================= */
:root {
    /* Couleurs additionnelles */
    --enluminure:   #c44b1a;   /* orange-brique des enluminures */
    --azur:         #1a5a8b;   /* bleu manuscrit médiéval */
    --parchemin:    #e8dcc8;   /* parchemin foncé */
    --encre-verte:  #2d5a27;   /* encre verte médiévale */
    --rubrique:     #9b1c1c;   /* rouge rubrique */
    --doré:         #c9972e;   /* or mat enluminé */
    
    /* Typographies fantaisistes */
    --titre-fantaisie: 'Cinzel Decorative', 'Uncial Antiqua', serif;
    --cursive-fantaisie: 'Cormorant Upright', 'Jim Nightshade', cursive;
    
    /* Animations */
    --transition-douce: 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* =============================================
   3. LETTRINES ET ENLUMINURES
   ============================================= */

/* Lettrine de chapitre */
.lettrine::first-letter {
    font-family: var(--titre-fantaisie);
    font-size: 4.5em;
    font-weight: 700;
    line-height: 0.75;
    float: left;
    margin: 0.05em 0.12em 0 0;
    color: var(--enluminure);
    text-shadow: 2px 2px 0 var(--parchemin), 3px 3px 0 rgba(0,0,0,0.1);
}

/* Paragraphe avec rubrication */
.rubrique {
    position: relative;
    padding-left: var(--espace-6);
}
.rubrique::before {
    content: '§';
    position: absolute;
    left: 0;
    top: 0;
    font-family: var(--titre-fantaisie);
    font-size: var(--texte-xl);
    color: var(--rubrique);
    line-height: 1;
}

/* =============================================
   4. TITRES DE PAGES — STYLE MANUSCRIT
   ============================================= */

.bandeau-page {
    position: relative;
    overflow: hidden;
}

.bandeau-page::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 3px;
    background: repeating-linear-gradient(
        90deg,
        var(--or) 0px, var(--or) 8px,
        transparent 8px, transparent 12px,
        var(--enluminure) 12px, var(--enluminure) 16px,
        transparent 16px, transparent 20px
    );
    opacity: 0.6;
}

.bandeau-page h1 {
    font-family: var(--titre-fantaisie);
    letter-spacing: 0.03em;
}

/* =============================================
   5. BOÎTES DÉCORATIVES
   ============================================= */

/* Boîte "cabinet de curiosités" */
.curiosite {
    background: var(--velin-clair);
    border: 1px solid var(--or-pale);
    border-radius: 2px;
    padding: var(--espace-6);
    position: relative;
    margin: var(--espace-6) 0;
}
.curiosite::before,
.curiosite::after {
    content: '❧';
    position: absolute;
    font-size: 1.2rem;
    color: var(--or);
    line-height: 1;
}
.curiosite::before { top: var(--espace-2); left: var(--espace-3); }
.curiosite::after  { bottom: var(--espace-2); right: var(--espace-3); transform: rotate(180deg); }

/* Boîte note marginale */
.note-marginale {
    float: right;
    clear: right;
    width: 200px;
    margin: 0 0 var(--espace-4) var(--espace-6);
    padding: var(--espace-3) var(--espace-4);
    font-family: var(--serif-texte);
    font-size: var(--texte-sm);
    font-style: italic;
    color: var(--gris);
    border-left: 2px solid var(--or-pale);
    line-height: 1.5;
}
.note-marginale strong {
    display: block;
    font-style: normal;
    font-family: var(--sans-ui);
    font-size: var(--texte-xs);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--or);
    margin-bottom: var(--espace-1);
}

/* =============================================
   6. CITATIONS — STYLE PARCHEMIN
   ============================================= */

.citation {
    background: linear-gradient(135deg, var(--velin) 0%, var(--parchemin) 100%);
    border: none;
    border-left: 4px double var(--or);
    padding: var(--espace-6) var(--espace-8);
    position: relative;
    font-family: var(--cursive-fantaisie);
    font-size: var(--texte-lg);
    font-style: italic;
    color: var(--encre);
    line-height: 1.7;
    margin: var(--espace-8) 0;
}

.citation::before {
    content: '\201C';
    font-family: var(--titre-fantaisie);
    font-size: 5rem;
    color: var(--or);
    opacity: 0.3;
    position: absolute;
    top: -0.5rem;
    left: var(--espace-4);
    line-height: 1;
}

.citation cite {
    display: block;
    margin-top: var(--espace-3);
    font-family: var(--sans-ui);
    font-size: var(--texte-xs);
    font-style: normal;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--gris);
}
.citation cite::before { content: '— '; }

/* =============================================
   7. NAVIGATION — ENRICHISSEMENTS
   ============================================= */

.nav-laterale .nav-marque .croix {
    font-size: 2.5rem;
    background: linear-gradient(135deg, var(--or) 0%, var(--enluminure) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: respirer 3s ease-in-out infinite;
}

@keyframes respirer {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.05); opacity: 0.85; }
}

.nav-laterale .nav-marque .titre {
    font-family: var(--titre-fantaisie);
    font-size: var(--texte-sm);
    letter-spacing: 0.05em;
}

/* Survol des liens de navigation */
.nav-laterale a {
    transition: all var(--transition-douce);
    border-radius: 3px;
}
.nav-laterale a:hover {
    padding-left: calc(var(--espace-8) + 4px);
    background: linear-gradient(90deg, rgba(176,141,87,0.12), transparent);
}
.nav-laterale a:hover .glyphe {
    transform: scale(1.2) rotate(-5deg);
}
.glyphe {
    display: inline-block;
    transition: transform var(--transition-douce);
}

/* =============================================
   8. TABLEAUX — STYLE REGISTRE ECCLÉSIASTIQUE
   ============================================= */

.tableau-comparatif {
    font-family: var(--serif-texte);
    border-collapse: separate;
    border-spacing: 0;
}

.tableau-comparatif thead tr {
    background: linear-gradient(90deg, var(--encre) 0%, var(--encre-doux) 100%);
}

.tableau-comparatif thead th {
    font-family: var(--sans-ui);
    font-size: var(--texte-xs);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--velin);
    padding: var(--espace-3) var(--espace-4);
    border: none;
}

.tableau-comparatif tbody tr {
    transition: background var(--transition);
}
.tableau-comparatif tbody tr:nth-child(even) {
    background: rgba(245,241,232,0.5);
}
.tableau-comparatif tbody tr:hover {
    background: rgba(176,141,87,0.08);
    transform: none;
}

.tableau-comparatif th[scope="row"] {
    font-family: var(--serif-titre);
    font-weight: 600;
    font-style: italic;
    color: var(--sapin);
    border-right: 2px solid var(--bordure);
    background: rgba(45,74,62,0.04);
}

/* =============================================
   9. BOÎTES CONFESSION — COULEURS TRADITION
   ============================================= */

.boite-protestant {
    border-left: 4px solid var(--sapin) !important;
    background: linear-gradient(135deg, #f0f7f0, var(--velin-clair)) !important;
}
.boite-protestant .marque-conf {
    color: var(--sapin) !important;
    font-family: var(--titre-fantaisie);
    font-size: var(--texte-sm);
}

.boite-orthodoxe {
    border-left: 4px solid var(--azur) !important;
    background: linear-gradient(135deg, #f0f4f8, var(--velin-clair)) !important;
}
.boite-orthodoxe .marque-conf {
    color: var(--azur) !important;
    font-family: var(--titre-fantaisie);
    font-size: var(--texte-sm);
}

.boite-catholique {
    border-left: 4px solid var(--rubrique) !important;
    background: linear-gradient(135deg, #faf0f0, var(--velin-clair)) !important;
}
.boite-catholique .marque-conf {
    color: var(--rubrique) !important;
    font-family: var(--titre-fantaisie);
    font-size: var(--texte-sm);
}

/* =============================================
   10. BADGES DE SIÈCLE (pour la bibliographie)
   ============================================= */

.badge-siecle {
    display: inline-block;
    font-family: var(--titre-fantaisie);
    font-size: var(--texte-xs);
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 2px;
    vertical-align: middle;
    margin-right: var(--espace-2);
    letter-spacing: 0.03em;
}
.badge-siecle.antiquite { background: var(--azur); color: #fff; }
.badge-siecle.medieval  { background: var(--rubrique); color: #fff; }
.badge-siecle.reforme   { background: var(--sapin); color: #fff; }
.badge-siecle.moderne   { background: var(--or); color: var(--encre); }
.badge-siecle.contemporain { background: var(--encre); color: var(--velin); }

/* =============================================
   11. ORNEMENTS DE SÉPARATION
   ============================================= */

.ornement {
    text-align: center;
    color: var(--or);
    font-size: 1.5rem;
    margin: var(--espace-8) 0;
    letter-spacing: 0.5em;
    opacity: 0.6;
}
.ornement::before { content: '✦ '; }
.ornement::after  { content: ' ✦'; }

/* Séparateur décoratif */
.separateur-enluminé {
    border: none;
    height: 2px;
    background: repeating-linear-gradient(
        90deg,
        transparent 0px, transparent 4px,
        var(--or-pale) 4px, var(--or-pale) 8px
    );
    margin: var(--espace-8) 0;
    position: relative;
}
.separateur-enluminé::before {
    content: '✠';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--velin);
    padding: 0 var(--espace-3);
    color: var(--or);
    font-size: var(--texte-sm);
}

/* =============================================
   12. BOUTONS — STYLE SEAU ECCLÉSIASTIQUE
   ============================================= */

.btn-primaire {
    background: linear-gradient(135deg, var(--sapin) 0%, var(--encre-verte) 100%);
    color: var(--velin);
    border: 1px solid rgba(255,255,255,0.1);
    padding: var(--espace-3) var(--espace-8);
    font-family: var(--sans-ui);
    font-size: var(--texte-sm);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: 2px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all var(--transition-douce);
}
.btn-primaire::before {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
    transition: left 0.5s;
}
.btn-primaire:hover::before { left: 100%; }
.btn-primaire:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(45,74,62,0.4);
}

/* =============================================
   13. NOTES CRITIQUES — STYLE CRITIQUE BIBLIQUE
   ============================================= */

.note-critique {
    background: linear-gradient(135deg, #fffbf0, var(--velin));
    border: 1px solid var(--or-pale);
    border-top: 3px solid var(--or);
    border-radius: 0 0 4px 4px;
    padding: var(--espace-5) var(--espace-6);
    margin: var(--espace-6) 0;
    position: relative;
}
.note-critique::before {
    content: '⚠';
    position: absolute;
    top: -14px;
    left: var(--espace-4);
    background: var(--or);
    color: #fff;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    line-height: 26px;
    text-align: center;
}
.note-critique .marque {
    font-family: var(--titre-fantaisie);
    font-size: var(--texte-sm);
    font-style: normal;
    color: var(--encre);
    display: block;
    margin-bottom: var(--espace-2);
    padding-left: var(--espace-6);
}

/* =============================================
   14. TITRES DE MODULES — PLUS DE VIE
   ============================================= */

.bandeau-page h1 {
    position: relative;
    display: inline-block;
}

.section-module h2,
.onglet-contenu h2 {
    font-family: var(--titre-fantaisie);
    font-size: var(--texte-xl);
    color: var(--encre);
    margin-bottom: var(--espace-4);
    padding-bottom: var(--espace-2);
    border-bottom: 1px solid var(--or-pale);
    position: relative;
}
.section-module h2::after,
.onglet-contenu h2::after {
    content: '✦';
    position: absolute;
    right: 0;
    bottom: var(--espace-2);
    color: var(--or);
    font-size: var(--texte-sm);
    font-family: sans-serif;
}

.tiret-rouge {
    font-family: var(--serif-titre);
    font-size: var(--texte-md);
    font-weight: 600;
    color: var(--encre);
    margin: var(--espace-6) 0 var(--espace-3);
    padding-left: var(--espace-4);
    border-left: 3px solid var(--enluminure);
    letter-spacing: 0.01em;
}

/* =============================================
   15. PAGE HERO — EFFETS LUMINEUX
   ============================================= */

@keyframes scintillement {
    0%, 100% { opacity: 0.4; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(1.02); }
}

/* Étoiles décoratives sur les headers */
.bandeau-page .surtitre {
    font-family: var(--sans-ui);
    font-size: var(--texte-xs);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--or);
    position: relative;
    padding-left: var(--espace-4);
}
.bandeau-page .surtitre::before {
    content: '✦';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    animation: scintillement 2s ease-in-out infinite;
}

/* =============================================
   16. RESPONSIVE — PRÉSERVER LA FANTAISIE
   ============================================= */

@media (max-width: 768px) {
    .note-marginale {
        float: none;
        width: auto;
        margin: var(--espace-4) 0;
    }
    .citation {
        padding: var(--espace-4) var(--espace-5);
        font-size: var(--texte-base);
    }
    .bandeau-page h1 {
        font-size: var(--texte-2xl);
    }
}