/* ====== CSS ====== */
/* la css est mise à jour et fonctionnel avec une table des matières automatique le 27.05.25*/

/* General Reset */
* { box-sizing: border-box; }
body, html { 
    margin: 0; 
    padding: 0; 
    font-family: 'Times New Roman', serif; 
    background: #f8f9fa; 
    color: #333; 
}

/* Main Content */
#main { 
    margin: 0 20px; 
    padding: 40px 0 0; 
}

/* Titles & Text */
.title { 
    text-align: center; 
    font: bold 22px Georgia, serif; 
    margin: 20px 0; 
    text-transform: uppercase; 
    letter-spacing: 2px; 
}

/* Credits */
#credits { 
    background: #f9f9f9; 
    padding: 10px 0; 
    text-indent: 7em; 
    text-align: center; 
    font: 14px Georgia, serif; 
    border-top: 2px solid #ccc; 
    width: 100%; 
    margin: 50px 0 0; 
}
#credits p { 
    margin: 0; 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    color: #555; 
}
#credits strong { color: #111; }

/* Footer */
#footer { 
    background: #000; 
    padding: 10px 40px; 
    color: #fff; 
    text-align: center; 
}
.logos { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    padding: 10px 100px; 
}
.logo { height: 80px; }
.logo2, .logo3 { height: 60px; }

/* Text & Paragraphs */
.text-section p, .para p { 
    text-align: justify; 
    text-justify: inter-word; 
    margin: 5px 0; 
}
.para { 
    width: 50%; 
    font-size: 1.2em; 
    line-height: 1.5; 
    margin: 0; 
    text-align: justify; 
}
p.note-text { 
    text-align: left; 
    margin-left: 180px; 
    line-height: 0.3; 
}

/* Tables */
.table { 
    width: 80%; 
    margin: 0 auto; 
    border-collapse: collapse; 
    border-spacing: 5px; 
    display: table; 
}
.td { text-align: justify; }

/* Special Elements */
.verset { 
    font-variant: small-caps; 
    color: lightgrey; 
    margin: 0.1cm 0.5cm; 
}
.ab_mzHeadLam {
    text-align: justify; 
    font-style: italic; 
    font-size: 1em; 
    margin: 1cm 0;
}

.ab_mzHead, .ab_mzEntry { 
    text-align: justify; 
    font-style: italic; 
    font-size: 1.3em; 
}
.ab_mzEntry { margin-left: 30px; }
.ab_Drop { 
    font-size: 1.8em; 
    text-align: right; 
    font-weight: bold; 
    text-transform: uppercase; 
    color: #333; 
}

/* Footnotes */
.fw, .fw_number, .fw_running, .fw_quire, .paraNum { 
    color: darkgrey; 
    margin: 0; 
}
.fw_number { text-align: right; }
.fw_running { 
    display: flex; 
    font-size: 1.1em; 
    margin-left: 100px; 
}
.fw_quire { 
    text-align: right; 
    visibility: hidden; 
}

/* Text Sections */
.text-section { 
    position: relative; 
    margin: 0 30px 4px 150px; 
    padding: 1px; 
    text-align: justify; 
}
.text-section table { width: 100%; }

/* Sidebar */
.sidebar { 
    height: 100%; 
    width: 0; 
    position: fixed; 
    z-index: 1; 
    top: 0; 
    left: 0; 
    background: #111; 
    overflow-x: hidden; 
    transition: 0.5s; 
    padding-top: 60px; 
    font-family: 'Times New Roman', sans-serif; 
}
.sidebar a { 
    padding: 8px 12px 8px 16px; /* Top Right Bottom Left */
    text-decoration: none; 
    color: #818181; 
    display: block; 
    transition: 0.3s; 
}
.sidebar a:hover { color: #f1f1f1; }

/* TOC */
#toc_container { 
    display: table; 
    font-size: 90%; 
    margin: 1em 0.7em 1em 5px; 
    padding: 0; 
    width: auto; 
}
#toc_container, #toc_container a { color: #818181; }
#toc_container a:hover { color: #000; }
#toc_container.active { background: #f8f9fa; }
.toc_title { 
    font-weight: 600; 
    text-align: left; 
    cursor: pointer; 
    display: inline-block; 
    margin-bottom: 10px; 
}
#toc_container li, #toc_container ul, #toc_container ul li { list-style: none; }
.point-header { 
    cursor: pointer; 
    display: inline-block; 
    padding: 4px 6px; 
    margin: 0; 
    font-weight: 600; 
}
.toc_title:hover, .point-header:hover { 
    background: #e2e6ea; 
    border-radius: 4px; 
}

/* Buttons */
.closebtn { 
    position: absolute; 
    top: 0; 
    right: 25px; 
    font-size: 36px; 
    margin-left: 50px; 
}
.openbtn { 
    font-size: 20px; 
    cursor: pointer; 
    background: #111; 
    color: #fff; 
    padding: 10px 15px; 
    border: none; 
}
.openbtn:hover { background: #444; }
.openbtn a { 
    color: #fff; 
    text-decoration: none; 
    display: inline-block; 
    width: 100%; 
    height: 100%; 
    text-align: center; 
    line-height: 1.2; 
}
.download { float: right; }
.download .openbtn { margin-left: 10px; }

/* Layout */
.content-wrapper { 
    display: flex; 
    flex-wrap: wrap; 
    gap: 5px; 
    justify-content: space-between; 
}
.text-container { 
    flex: 1; 
    background: #fff; 
    padding: 30px; 
    margin: 0 auto; 
    max-width: 800px; 
    width: 80%; 
}
.image-section { 
    flex: 0 0 auto; 
    max-width: 600px; 
    width: 50%; 
    margin-right: 100px; 
}
.image-section img { 
    max-width: 100%; 
    height: auto; 
}

/* Responsive */
@media (max-width: 768px) {
    .download { flex-direction: column; align-items: flex-end; gap: 5px; }
    #main { margin: 0; padding: 10px; }
    .content-wrapper { flex-direction: column; align-items: center; }
    .text-container, .image-section { width: 100%; max-width: 90%; }
    .image-section { margin-bottom: 20px; }
    .sidebar { width: 100%; }
    .sidebar a { font-size: 16px; }
}