/* STORY AND CHAPTER SELECTION STYLES */

/*story*/
.story {
    background-color: black;
    height: 100%;
}

.story__container {
    display: flex;
    flex-direction: column; /* empile les enfants en colonne */

    align-items: center; /* ou center si on veut centrer horizontalement */
    justify-content: flex-start; /* gère l’alignement vertical */

    /* align-items: top;
    justify-self: top; */

    margin: 0 auto;
    /* margin : 1rem 3rem; */

    /* TAILLE */
    /* height: 90vh; */
    /* height: 100%; */
    min-height: 100vh;
    height: auto;

    background-color: black;
    z-index: 1;
    width: 100%;
    max-width: var(--max-width);

    position: relative;

    padding-bottom: 3rem; /*pour éviter que le bas du site s'arrête vraiment à la fin du dernier div, en tout cas pour l'instant*/



}

.story__content {
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    /* grid-template-columns: minmax(0, 1fr); see note below
    grid-template-areas: "sidebar content"; */

    align-self: center;
    justify-content: center;
    /* justify-self: center; */
    height: 500px;

}

.story__content p {
    /* grid-area: content; */
    color: #fff;
    text-align: start;
    font-size: 2.5vh;
    justify-content: center;
    align-content: center;
}


.img_container {
    /* grid-area: sidebar ; */
    max-height: 500px;
    display: flex;
    justify-content: center;
    align-items: start;

    
    /* padding-right: 1.5vw; */
}

.img_container a {
    height: 100%;
}

#cover_mcguffin {
    max-width:100%;
    max-height:100%;
    overflow: visible;
    border: 2px solid #fff;
}

/*chap selec*/

.chap_selec {
    padding-top: 3rem;
    padding-bottom: 1rem;
    max-width: 80 vw;

    text-align: center;
}

.chap_selec p {
    color: #fff;
    font-weight: bold;
    max-width: 35vw;

}

.chap_selec h1 {
    color: white;
    font-size: 50px;  
    font-weight: bolder; 

    /* gradient de couleur sur le texte : */
    background-image: linear-gradient(rgb(255, 255, 255), rgb(9, 255, 0));
    color: transparent;
    background-clip: text;

}

.link-list {
    max-height: 400px;   /* limite la hauteur */
    overflow-y: auto;    /* active le scroll vertical */
    overscroll-behavior: contain;

    border: 2px solid gray;
    padding: 10px;
    background: #111;
    color: white;
    width: 80%;
}
.link-list ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.link-list li {
    margin: 5px 0;
}
.link-list a {
    color: white;
    text-decoration: none;
    font-weight: bold;
    font-size: 2.5vh;
}
.link-list li :hover {
    background-image: linear-gradient(rgb(255, 255, 255), rgb(9, 255, 0));
    color: transparent;
    background-clip: text;
    
    transition : all 0.3s ease;
}

/* #sentinel {
    background-color: red;
} */

#sentinel { min-height: 10px; background: rgba(255,0,0,0.15); outline: 1px solid red; }

@media screen and (max-width:960px) {
    
    /* Story */
     .story__container { 
        /* stack déjà ses enfants en colonne */
        background-size : contain;
        padding-bottom: 0;
    }

    .story__content {
        padding-top: 1.5rem;
        
        height: auto;
        
        display: flex;
        flex-direction: column; /* empile les enfants en colonne */

        align-items: center; /* ou center si on veut centrer horizontalement */
        justify-content: flex-start; /* gère l’alignement vertical */

    }

    .img_container {
        /* padding-right: 2.5vw;
        padding-left: 3.5vw; */
        height: 30vh;
    }

    .story__content p {
        text-align: start;


        font-size: 1.75vh;
        padding-top: 2vw;
        
        /* margin: 2vw 2vw; */ /*dans le cas où c center*/
        padding-left: 8vw;
        padding-right: 8vw;


    }

    #cover_mcguffin {
    max-width:100%;
    max-height:100%;
    }
    
    /*chap selec*/
    .chap_selec {
    padding-top: 1rem;
    max-height: none;
    
    }
    .chap_selec h1 {
    font-size: 30px;

    }
    .chap_selec p {
        font-size: 1.4vh;
        max-width: 90vw;
        max-height: 30vh;
    }

    .link-list {
        /* padding-bottom: 2rem; */
        padding: 0;
        margin-top: 2vh;
        margin-bottom: 2vh;

        /* height: 10vh; */
        max-height: 20vh;   /* OK de limiter, mais pas trop */
        overflow-y: auto;
        overscroll-behavior: contain;

        width: 80%;
    }
    .link-list a {
    font-size: 1.5vh;
    }
    .link-list li :hover {
    transition : none;
    }

}