body {
        background-color: rgba(245, 201, 106, 0.7);
        font-family: Optima, Sans-Serif;
        font-weight: 300;
        font-size: 14px;
        color: #6B3F1F;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        display: flex;
    }

    html, body {
        overflow: hidden;
        height: 100%;
        -webkit-overflow-scrolling: touch;
    }



    .menu{
        box-sizing: border-box;
        flex: 0 0 300px;
        background-color: #A3B85C;
        height: 100dvh;
        padding: 10px 30px;
        overflow: hidden;
    }

    .container{
        flex: 1;
        height: 100dvh;
        overflow-y: scroll;
        scroll-snap-type: y mandatory;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-y: contain;
    }

    .section {
        width: 100%;
        height: 100dvh;
        scroll-snap-align: start;
        scroll-snap-stop: always;
        box-sizing: border-box;
        padding: 30px;
        overflow: hidden;
    }
    
    
    
    /*ELEMENTS DE PRESENTATION*/
    .section-flex{
        display: flex;
        gap: 30px;
        justify-content: space-between;
        align-items: flex-start;
    }

    .date{
        flex: 0 0 45px;
        font-family: "Oldenburg", "Times New Roman", serif;
        font-size: 20px;
        font-weight: bold;
    }
    
    .nom{
        flex: 0 0 150px;
        font-size: 25px;
        font-family: "Times New Roman", serif;
        font-weight: lighter;
        line-height: 40px;
        text-align: justify;
        letter-spacing: 3px;
        }

    .image{
        flex: 0 0 100px;
        box-shadow: 0px 3px 7px #6B3F1F;
        }


    .info{
        flex: 0 0 245px;
        background-image: url('logo_film.jpg');
        background-repeat: no-repeat;
        background-position: top right;
        font-size: 20px;
        text-align: center;
        }
        
        .info_genre{
            font-family: "Times New Roman", serif;
            font-size: 20px;
            line-height: 38px;
            letter-spacing: 15px;
            text-align: center;
        }
        
        
        .languette{
            background-color: #EAD9B8;
            box-shadow: 0px 5px 5px #6B3F1F;
            width: 160px;
            padding: 10px;
            font-size: 12px;
            text-align: justify;
        }




    /*ELEMENTS DE TEXTE*/
    .section-texte{
        margin-top: 50px;
        height: 70dvh;
        position: relative;
    }
        
        .texte-image1{
            z-index: -1;
            width: 50%;
            height: 395px;
            background-image: url('https://i.pinimg.com/1200x/6b/71/d7/6b71d72bb530e517cd8080a81d9436c3.jpg');
            background-repeat: no-repeat;
            background-position: center;
            background-size: 100%;
            position: absolute;
            right: 160px;
            bottom: 0px;
        }
        
        .texte-image2{
            
        }

        p {
            column-count: 6;
        }








a{
    display: block;
    color: #4E5F2A;
    text-decoration: none;
    text-align: right;
    font-weight: bold;
    line-height: 25px;
    letter-spacing: 2px;
}


h1{
    padding: 2.5rem;
    
}


hr{
    border: 0px solid black;
    border-top: 1px solid black;
    width: 250px;
}