section.home{

    h2{
        font-family: "Belanosima", serif;
        font-weight: 400;
        font-style: normal;
        font-size: 40px;
        color: #262524;
        text-align: center;
    }

    p{
        font-family: "Belgrano", serif;
        font-weight: 400;
        font-style: normal;
        font-size: 18px;
        line-height: normal;
        color: #262524;
    }
    
    section.spectacles{
        background-color: #E7D3C9;
        padding-top: 100px;
        padding-bottom: 150px;
        background-image: url(./../image/vector2_blanc.svg);
        background-size: 300% 300%;
        background-position: 45% 60%;

        div.main-carousel{
            margin-top: 20px;

            .carousel-cell{
                border-radius: 20px;
            }
        }

        .image-wrapper {
            border-radius: 20px;
            position: relative;

            img{
                transform-origin: center;
                transition: 0.3s;
            }

            img:hover{
                scale: 1.05;
            }
        }

        .text-overlay {
            width: 350px;
            position: absolute;
            bottom: 0;
            left: 0;
            transform: translate(0%, -20%);
            padding-left: 20px;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 20px;

            h3{
                font-family: "Belanosima", serif;
                font-weight: 400;
                font-style: normal;
                font-size: 40px;
                color: #FFFFFF;
            }

            p {
                color: #FFFFFF;
                line-height: normal;
            }
        }
    }

    section.ateliers{
        height: 50vh;
        padding-top: 100px;
        padding-bottom: 100px;
        display: grid;
        grid-template-columns: repeat(2,1fr);
        position: relative;

        div.image_ateliers{
            mask-image: url(./../image/vector_ateliers_home.svg);
            mask-size: 100% 100%;
            height: 90vh;
            width: 50vw;
            position: absolute;
            left: -150px;
            top: -125px;
            align-content: start;

            img{
                border-radius: 0;
                width: 100%;
                height: 100%;
                object-fit: cover;
            }

        }

        div.container{
            grid-column: 2/2;
            align-items: center;
            align-content: center;
            align-self: center;
        }

        div.text_ateliers{
            width: 450px;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 20px;
        }
    }

    section.actualites_bandeau{
        background-color: #000000;
        background-image: url(./../image/vector2_blanc.svg);
        background-size: 150% 150%;
        background-position: 100% 85%;
    }

    section.actualites{
        background: none;
        padding-top: 100px;
        padding-bottom: 50px;

        h2{
            text-align: start;
            color: #FFFFFF;
        }

        button.jaune:hover{
            background-color: #FFFFFF;
            color: #000000;
        }

        a{
            text-decoration: none;
        }

        div.carousel{
            margin-top: 20px;
        }
        
        div.carousel_home_actualites{
            display: grid;
            grid-template-columns: repeat(2,1fr);
            grid-template-rows: repeat(1);
            transition: 0.3s;
            border-radius: 20px;

            div.image_actu{
                grid-column: 1/1;
                grid-row: 1/1;
                text-align: end;

                img{
                    border-top-right-radius: 0;
                    border-bottom-right-radius: 0;
                }
            }

            div.text_actu{
                width: 300px;
                background-color: #FFFFFF;
                padding: 20px;
                grid-column: 2/2;
                grid-row: 1/1;
                border-top-right-radius: 20px;
                border-bottom-right-radius: 20px;
                align-content: center;

                h3{
                    font-family: "Belanosima", serif;
                    font-weight: 400;
                    font-style: normal;
                    font-size: 32px;
                    color: #262524;
                    text-decoration: none;
                    text-align: start;
                    padding-top: 20px;
                }

                p{
                    font-family: "Belgrano", serif;
                    font-weight: 400;
                    font-style: normal;
                    font-size: 18px;
                    line-height: normal;
                    color: #262524;
                    text-decoration: none;
                    text-align: start;
                }
            }
        }

        div.carousel_home_actualites:hover{
            scale: 1.05;
        }

        div.button_home_actualites{
            text-align: center;
            padding-top: 50px;
        }
    }

    section.bandeau{
        background: none;

        div.container{
            overflow-x: hidden;
            padding-bottom: 100px;
            display: grid;
            grid-template-columns: repeat(12,1fr);
            grid-template-rows: repeat(1);
            column-gap: 20px;
        }

        div.contact{
            background-color: #E7D3C9;
            padding-top: 50px;
            padding-bottom: 50px;
            grid-column: 1/7;
            grid-row: 1/1;
            border-top-left-radius: 20px;
            border-bottom-left-radius: 20px;
            padding-left: 100px;
            padding-right: 100px;
            align-items: center;

            div.infos_contact{
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                gap: 20px;

                div{
                    padding-top: 20px;
                    text-align: start;
                }
    
                p{
                    width: 450px;
                    padding-top: 20px;
                    text-align: start;
                }
    
                h2{
                    width: 450px;
                    text-align: start;
                }
            }
        }

        div.soutien{
            background-image: url(./../image/vector_bandeau_home.svg);
            background-size: 100% 100%;
            background-position: 60% 100%;
            padding-top: 50px;
            padding-bottom: 50px;
            grid-column: 6/12;
            grid-row: 1/1;
            padding-left: 100px;
            padding-right: 100px;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 20px;

            div{
                padding-top: 20px;
                text-align: center;
            }

            p{
                width: 450px;
                padding-top: 20px;
                color: #FFFFFF;
                text-align: center;
            }

            h2{
                width: 450px;
                color: #FFFFFF;
            }
        }
    }
}

@media screen and (max-width: 1320px) {

    section.actualites_bandeau{

        section.bandeau{

            div.container{

                div.contact{
                    padding-left: 50px;
                    padding-right: 50px;
                
                    h2{
                        width: 350px;
                    }
                
                    p{
                        width: 350px;
                    }
                }
                
                div.soutien{
                
                    h2{
                        width: 350px;
                    }
                
                    p{
                        width: 350px;
                    }
                }
            }
        }
    }
    
}

@media screen and (max-width: 924px) {

    section.home{

        section.spectacles{
    
            div.main-carousel{

                div.flickity-viewport{

                    div.flickity-slider{
                
                        .carousel-cell {
                            translate: 140px;

                            div.image-wrapper{

                                a{

                                    .text-overlay {
                                        width: 350px;
                                        bottom: 0;
                                        left: 0;
                                        transform: translate(0%, -20%);
                                        padding-left: 100px;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
        

        section.actualites_bandeau{

            section.actualites{

                div.carousel{

                    div.flickity-viewport{

                        div.flickity-slider{

                            .carousel-cell{
                                translate: 5px;

                                a{

                                    div.carousel_home_actualites{

                                        div.image_actu{

                                            img{
                                                width: 300px;
                                                height: auto;
                                            }
                                        }

                                        div.text_actu{
                                            width: 250px;
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }

            section.bandeau{

                div.container{

                    div.contact{
                        padding: 20px;
                        grid-column: 1/8;
                
                        h2{
                            width: 300px;
                            font-size: 35px;
                        }
                
                        p{
                            width: 300px;
                            font-size: 14px;
                        }
                    }
                
                    div.soutien{
                        grid-column: 6/12;
                        background-size: 110% 100%;
                        background-position: 0% 100%;
                
                        h2{
                            width: 300px;
                            font-size: 35px;
                        }
                
                        p{
                            width: 300px;
                            font-size: 14px;
                        }
                    }
                }
            }
        }
    }
}

@media screen and (max-width: 688px) {

    section.home{

        section.spectacles{
    
            div.main-carousel{

                div.flickity-viewport{

                    div.flickity-slider{
                
                        .carousel-cell {
                            width: 300px;
                            height: auto;
                            translate: 10px;

                            div.image-wrapper{

                                a{

                                    .text-overlay {
                                        width: 300px;
                                        bottom: 0;
                                        left: 0;
                                        transform: translate(0%, -20%);
                                        padding-left: 30px;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }

        section.ateliers{
            display: flex;

            div.image_ateliers{
                display: none;
            }

            div.container{

                div.text_ateliers{
                    width: 300px;
                }
            }
        }

        section.actualites_bandeau{

            section.actualites{

                div.carousel{

                    div.flickity-viewport{

                        div.flickity-slider{

                            .carousel-cell{
                                translate: 5px;

                                a{

                                    div.carousel_home_actualites{

                                        div.image_actu{

                                            img{
                                                width: 150px;
                                                height: auto;
                                            }
                                        }

                                        div.text_actu{
                                            width: 100px;

                                            h3{
                                                font-size: 30px;
                                            }

                                            p{
                                                font-size: 14px;
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }

            section.bandeau{

                div.container{
                    display: flex;
                    flex-direction: column;
                    justify-content: flex-start;
                    max-width: 688px;
                    height: auto;
                    padding: 0;

                    div.contact{
                        border-radius: 0;
                
                        h2{
                            font-size: 30px;
                            width: 300px;
                        }
                
                        p{
                            font-size: 14px;
                            width: 300px;
                        }
                    }
                
                    div.soutien{
                        padding: 0;
                        background-image: none;
                        background-color: #000000;
                        padding-bottom: 50px;
                
                        h2{
                            margin-top: 20px;
                            font-size: 30px;
                        }
                
                        p{
                            font-size: 14px;
                        }
                    }
                }
            }
        }
    }
}