/* ============================================
BOOK.CSS
Les Origines d'Asnaë
============================================ */
/************************************************
MENU LIVRE
************************************************/
.book-nav-wrapper{
    position:sticky;
    top:185px;
    z-index:998;
    width:100%;
    background:
    linear-gradient(
        to bottom,
        rgba(236,225,202,.98),
        rgba(223,208,180,.97)
    );
    border-top:2px solid #c9a84c;
    border-bottom:1px solid rgba(0,0,0,.08);
    overflow:hidden;
}

.book-nav-wrapper::before{

    content:"❮❮";

    position:absolute;

    left:12px;
    top:50%;

    transform:translateY(-50%);

    color:#8b6f34;

    font-size:2rem;

    font-weight:bold;

    pointer-events:none;

    z-index:5;
}

.book-nav-wrapper::after{

    content:"❯❯";

    position:absolute;

    right:12px;
    top:50%;

    transform:translateY(-50%);

    color:#8b6f34;

    font-size:2rem;

    font-weight:bold;

    pointer-events:none;

    z-index:5;
}

.book-nav{

    display:flex;

    gap:12px;

    overflow-x:auto;

    overflow-y:hidden;

    padding:14px 60px;

    scrollbar-width:none;

    -webkit-overflow-scrolling:touch;
}

.book-nav::-webkit-scrollbar{
    display:none;
}

.book-nav a{

    flex:0 0 auto;

    display:flex;

    align-items:center;
    justify-content:center;

    min-width:90px;

    padding:16px 24px;

    border-radius:18px;

    text-decoration:none;

    color:#2f2b22;

    font-size:1rem;

    font-weight:600;

    background:
    linear-gradient(
        180deg,
        rgba(255,255,255,.55),
        rgba(238,229,212,.96)
    );

    border:
    1px solid rgba(120,95,55,.10);

    box-shadow:
    0 3px 8px rgba(0,0,0,.04),
    inset 0 1px 0 rgba(255,255,255,.55);

    transition:.35s;
}

.book-nav a:hover{

    transform:translateY(-3px);
}

.book-nav a.active{

    color:#fff;

    background:
    linear-gradient(
        135deg,
        #5b7348,
        #31472c
    );
}

/************************************************
CONTENEUR
************************************************/
.book-container{
    max-width:1200px;
    margin:0 auto;
    padding:280px 15px 20px;
}
/************************************************
COUVERTURE
************************************************/
.book-cover{
    text-align:center;
    padding:300px 30px 60px;
    margin-bottom:30px;
    border-radius:0 0 30px 30px;
    background:url("/images/sanael-cover.webp");
    background-size:cover;
    background-position:center top;
    border:1px solid rgba(216,196,154,.15);
    box-shadow:
    0 20px 60px rgba(0,0,0,.35);
}
.book-chapter1 {
    padding:600px 30px 60px;
    margin-bottom:30px;
    border-radius:0 0 30px 30px;
    background:url("/images/og-chapitre1.webp");
    background-size:cover;
    background-position:center bottom;
    border:1px solid rgba(216,196,154,.15);
    box-shadow:
    0 20px 60px rgba(0,0,0,.35);
}
.book-chapter2 {
    padding:600px 30px 60px;
    margin-bottom:30px;
    border-radius:0 0 30px 30px;
    background:url("/images/og-chapitre2.webp");
    background-size:cover;
    background-position:center bottom;
    border:1px solid rgba(216,196,154,.15);
    box-shadow:
    0 20px 60px rgba(0,0,0,.35);
}
.book-chapter3 {
    padding:600px 30px 60px;
    margin-bottom:30px;
    border-radius:0 0 30px 30px;
    background:url("/images/og-chapitre3.webp");
    background-size:cover;
    background-position:center bottom;
    border:1px solid rgba(216,196,154,.15);
    box-shadow:
    0 20px 60px rgba(0,0,0,.35);
}
.book-chapter4 {
    padding:600px 30px 60px;
    margin-bottom:30px;
    border-radius:0 0 30px 30px;
    background:url("/images/og-chapitre4.webp");
    background-size:cover;
    background-position:center bottom;
    border:1px solid rgba(216,196,154,.15);
    box-shadow:
    0 20px 60px rgba(0,0,0,.35);
}
.book-chapter5 {
    padding:600px 30px 60px;
    margin-bottom:30px;
    border-radius:0 0 30px 30px;
    background:url("/images/og-chapitre5.webp");
    background-size:cover;
    background-position:center bottom;
    border:1px solid rgba(216,196,154,.15);
    box-shadow:
    0 20px 60px rgba(0,0,0,.35);
}
.book-epilogue {
    padding:600px 30px 60px;
    margin-bottom:30px;
    border-radius:0 0 30px 30px;
    background:url("/images/og-epilogue.webp");
    background-size:cover;
    background-position:center bottom;
    border:1px solid rgba(216,196,154,.15);
    box-shadow:
    0 20px 60px rgba(0,0,0,.35);
}
.book-cover h1{
    font-family:'Cinzel',serif;
    font-size:4rem;
    color:#f5e6c8;
    text-shadow:
        0 2px 10px rgba(0,0,0,.8),
        0 0 25px rgba(0,0,0,.6);
}
.book-cover p{
    font-family:'Great Vibes',cursive;
    font-size:3rem;
    color:#fff7e3;
    text-shadow:
        0 2px 10px rgba(0,0,0,.8),
        0 0 25px rgba(0,0,0,.6);
}
/************************************************
INTRODUCTION
************************************************/
.book-intro{
    max-width:800px;
    margin:0 auto 20px;
    background:
    rgba(255,255,255,.03);
    border:1px solid rgba(216,196,154,.15);
    border-radius:24px;
    padding:45px 35px;
    backdrop-filter:blur(6px);
}
.book-intro h2{
    text-align:center;
    font-family:'Cinzel',serif;
    font-size:3rem;
    color:#d8c49a;
    margin-bottom:35px;
}
.book-intro p{
    font-family:'Poppins',sans-serif;
    color:#f3f3f3;
    line-height:2;
    font-size:1.4rem;
    margin-bottom:24px;
    text-align:justify;
}
.book-intro p:first-of-type::first-letter{
    float:left;
    font-family:'Cinzel',serif;
    font-size:5rem;
    line-height:.8;
    margin-right:12px;
    color:#d8c49a;
}

.book-intro a{
    display:inline-block;
    margin-top:15px;
    color:#d8c49a;
    text-decoration:none;
    font-weight:600;
    border-bottom:1px solid #d8c49a;
    transition:.3s;
}

.book-intro a:hover{
    color:#f5e6c8;
    border-color:#f5e6c8;
}

.book-start{
    text-align:center;
    margin-top:50px;
    font-size:1.4rem;
}
.btn-book{
    display:inline-block;
    padding:16px 32px;
    border-radius:18px;
    text-decoration:none;
    font-weight:600;
    color:#111;
    background:
    linear-gradient(
        135deg,
        #d8c49a,
        #b79a60
    );
    box-shadow:
    0 10px 25px rgba(0,0,0,.25);
    transition:.3s;
}
.btn-book:hover{
    transform:translateY(-3px);
    box-shadow:
    0 15px 35px rgba(0,0,0,.35);
}
/************************************************
CHAPITRES
************************************************/
.chapter{
    max-width:1000px;
    margin:0 auto 20px;
    background:
    rgba(255,255,255,.03);
    border:1px solid rgba(216,196,154,.15);
    border-radius:24px;
    padding:45px 35px;
    backdrop-filter:blur(6px);
}
.chapter h2{
    text-align:center;
    font-family:'Cinzel',serif;
    color:#d8c49a;
    font-size:2rem;
    margin-bottom:40px;
}
/* Lettre ornée uniquement sur le 1er paragraphe */
.chapter-text p:first-of-type::first-letter{
    float:left;
    font-family:'Cinzel',serif;
    font-size:5rem;
    line-height:.8;
    margin-right:12px;
    color:#d8c49a;
}
.chapter-text{
    font-family:'Poppins',sans-serif;
    color:#f3f3f3;
    line-height:2;
    font-size:1.4rem;
    text-align:justify;
}
/* Espacement entre les paragraphes */
.chapter-text p{
    margin-bottom:1.6em;
}
/* Lignes courtes dramatiques (ex: "Rien.", "Puis le ciel changea.") */
.chapter-text p.short-line{
    text-align:center;
    font-style:italic;
    color:#d8c49a;
    font-size:1.4rem;
    margin:2rem auto;
    letter-spacing:0.04em;
}
/* Variante italique sans couleur dorée */
.chapter-text p.italic{
    font-style:italic;
    color:#ccc;
}
.chapter-text img{
    display:block;
    width:100%;
    margin:50px auto;
    border-radius:24px;
    border:1px solid rgba(216,196,154,.15);
    box-shadow:0 15px 40px rgba(0,0,0,.35);
}
.chapter-image{
    display:block;
    width:100%;
    margin:40px auto;
    border-radius:22px;
    border:1px solid rgba(216,196,154,.15);
    box-shadow:0 15px 40px rgba(0,0,0,.35);
}
/************************************************
DIALOGUES
************************************************/
.chapter blockquote{
    margin:24px 0 24px 0;
    padding:16px 24px;
    border-left:4px solid #d8c49a;
    background:rgba(216,196,154,.06);
    border-radius:0 12px 12px 0;
    color:#f5e6c8;
    font-style:italic;
    line-height:1.8;
    font-size:1.4rem;
}
/************************************************
SEPARATEURS
************************************************/
.chapter-break{
    text-align:center;
    font-size:2rem;
    color:#d8c49a;
    margin:50px 0;
}