@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap');

@import url("normalize.css");
@import url("utilitaires.css");
@import url("typo.css");



.conteneur {
    max-width: 1000px;
    margin: auto;
}

body {
    color: white;
    background-color: var(--couleur-background);

}

/* 1ère grille */

.grille1 svg {
    display: none;
}
@media (max-width: 600px){
.b {
    margin-right: 150px;
    margin-left: 30px;
}
}
@media (min-width: 600px) {
    .grille1 {
        display: grid;
        grid-template-columns: 1.5fr 2fr 1.25fr 1.25fr 4fr;
        grid-template-areas:
                        "a a a a ."
                        "b b b . .";
        position: relative;
    }

    .grille1 svg {
        position: absolute;
        bottom: -0.35em;
        right: calc(-50% + 1em);
        width: 100%;
        height: 20vw;
        z-index: 2;
        display: block;
    }

    .a {
        grid-area: a;
        padding-top: 3em;
    }

    .b {
        grid-area: b;
    }
}

/* 2ème grille */
.film-se-distingue {
    min-height: 80vh;
    position: relative;
}

.film-se-distingue::before {
    position: absolute;
    width: 100%;
    top: 10vh;
    bottom: 0;
    transform: skew(11deg) rotate(11deg);
    background-color: var(--couleur-rouge);
    content: " ";
    z-index: -1;
}

@media (min-width: 600px) {
    .film-se-distingue {
        /* multiple backgrounds */
        background-image: url("../images/photo-1_w600.jpg"), url("../images/photo-2_w1200.jpg");
        background-position: top left, bottom right;
        background-size: calc(50% - 1em), calc(50% + 1em);
        background-repeat: no-repeat, no-repeat;
        background-origin: content-box, content-box;
        padding-top: 0.25em;
        /*background-attachment: fixed, fixed;*/
        /*overflow: hidden;*/
    }

    .film-se-distingue::before {
        top: 0;
        transform: skew(-11deg) rotate(-11deg);
        background-color: var(--couleur-rouge);
        z-index: 0;
    }
}

.c {
    position: relative;
    min-height: 20vh;
    /*background-color: #cccccc;*/
}

.le-grand-shang-shi__picture {
    position: absolute;
    right: 35px;
    bottom: 0;
    z-index: 3;
}

@media (min-width: 600px) {
    .grille2 {
        display: grid;
        grid-template-columns: 1.5fr 2fr 1.25fr 1.25fr 4fr;
        grid-template-areas:
                        ". . . c c"
                        ". d d e e";
    }

    .c {
        grid-area: c;
        position: relative;
        min-height: 10vh;
    }

    .le-grand-shang-shi__picture {
        position: absolute;
        right: 35px;
        bottom: 0;
        z-index: 3;
    }

    .d {
        grid-area: d;
        padding-right: 0.5em;
    }

    .e {
        grid-area: e;
    }

    .d, .e {
        position: relative;
        z-index: 1;
    }
}
.premierePartie {
    margin: 10px 20px 20px;
}

/*GRILLE 3*/
@media (min-width: 600px) {
    .grille3 {
        display: grid;
        grid-template-columns: 1.5fr 2fr 1.25fr 1.25fr 4fr;
        column-gap: 30px;
        grid-template-areas:
                        ". . f f f"
                        "x x f f f"
                        ". . f f f";
    }

    .f {
        grid-area: f;
        padding-top: 2rem;
        padding-bottom: 40px;
    }

    .x {
        grid-area: x;
        margin-left: 20px;

    }
}

/*GRILLE 4*/
.grille4 {
    display: grid;
    margin-top: 100px;
    background-color: var(--couleur-rouge);
    grid-template-columns: 0.5fr 1.5fr 2fr 1.25fr 1.25fr 4fr;
    grid-template-areas:
                        ". g g g . h";
}
.g {
    grid-area:g;
    line-height: 1.8em;
}
.h {
         grid-area: h;
         position: relative;
    right: 20px;
         /*min-height: 10vh;*/
     }
.image_film {
           position: absolute;
           bottom: 40px;
           z-index: 3;
       }
@media (min-width: 600px) {

    .g {
        line-height: 1.8em;
    }

}


.infosFilm {
    margin: 15px 1px 10px 40px;
}
    .logo {
        width: 100px;
        display: block;
        margin: 2rem auto 3rem;

    }

    @media (min-width: 500px) {
        .logo {
            width: 200px;
        }
    }
    @media (min-width: 800px) {
        .logo {
            width: 300px;
        }
    }
/*étoiles*/
    .box {
        display: flex;
        flex-direction: row;
        margin: 0px 30px 10px;
    }

    .etoiles {
        font-size: 20px;
        color: rgba(255, 190, 24, 1);
        margin: 0;
        transition: transform 0.3s;
    }

    .etoiles:hover {
        transform: scale(2);
        filter: brightness(300%);
    }

    @media (min-width: 500px) {
        .etoiles {
            font-size: 50px;
        }
    }


/*FOOTER*/

footer {
        background-color: rgba(13, 15, 17, 1);
        padding: 2em;

    }
/*SPITRE CSS*/
/*menu medias sprite*/
.menu-sociaux {
    list-style-type: none;
    display: flex;
    flex-direction: row;
}

.menu-sociaux__lien {
    font-size: 0;
    display: block;
    width: 50px;
    height: 50px;
    margin-right: 1rem;
    background-image: url(../images/contactMedia.png);
    background-repeat: no-repeat;
}
.menu-sociaux__item:first-child .menu-sociaux__lien {
    background-position: 0 0;
}
.menu-sociaux__item:nth-child(2) .menu-sociaux__lien {
    background-position: -81px 0;
}
.menu-sociaux__item:nth-child(3) .menu-sociaux__lien {
    background-position: -162px 0;
}

.menu-sociaux__item .menu-sociaux__lien:link,
.menu-sociaux__item .menu-sociaux__lien:visited {
    transition: all .7s ease;
    /* permet de voir le déplacement de l'image */
}
.menu-sociaux__item .menu-sociaux__lien:hover,
.menu-sociaux__item .menu-sociaux__lien:active {
    background-position-y: -55px;
}
.sprite {
    width: 212px;
    height: 108px;
    margin: 0 3rem 6rem 3rem;
    background: url(../images/contactMedia.png) no-repeat;
}
/*liens footer*/
    .sources {
        font-weight: bold;
    }

    li {
        list-style: none;
        font-size: 18px;
        color: white;
        font-family: 'Roboto', 'Arial Narrow', Arial, sans-serif;
        line-height: 1.5;
    }

    a:link {
        color: lightgray;
    }

    a:visited {
        color: var(--couleur-rouge);
    }
    a:hover{
        color: darkgray;
    }
    a:active {
        color: white;
    }