/* Changement spécifique au projet */

body {
    margin: 0;
    font-family:'Lato', sans-serif;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-image: url('../images/rock-en-seine/background.svg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.logo svg path {
  fill: #326735;
  transition: fill 0.3s ease;
}

.burger span {
    background-color: #326735;
}

.nav-links li:not(:nth-child(4)) a {
    color: #326735;
}

.btn-tertiary {
    background-color: #326735;
}

.btn-tertiary:hover,
.btn-tertiary:active {
    background-color: #244C26;
}

footer {
    border-top: 2px solid #3267352e;
}

footer div p {
    color: #326735;
}

.width {
    padding: 80px 12px;
}

h1 {
    color: #326735;
}

p > span {
    color: #326735;
}

/* Introduction du projet */

.introduction-section {
    background-image: url('../images/rock-en-seine/deco-one.webp');
    background-position: left -8% bottom 0%;
    background-size: 300px auto;
    background-repeat: no-repeat;
}

.introduction {
    display: grid;
    align-items: center;
    grid-template-columns: 7fr 5fr;
    gap: 24px;
}

.introduction > div > div:last-of-type > img:first-of-type {
    padding-bottom: 56px;
}

.image-full-height {
    display: flex;
    justify-content: center;
}

.image-full-height > img {
    width: 100%;
}

/* Section Print */

.print-section {
    background-image: url('../images/rock-en-seine/deco-five.webp');
    background-position: right 10% bottom 5%;
    background-size: 250px auto;
    background-repeat: no-repeat;
}

.print {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    align-items: start;
    gap: 24px;
}

.print div:first-of-type {
    grid-column: span 5;
}

.print div:last-of-type {
    grid-column: span 7;
}

.print div:last-of-type > div:first-of-type{
    padding: 0px 16px;
    height: 100%;
}

/* Goodies */

.goodies-section {
    background-image: url('../images/rock-en-seine/deco-four.webp');
    background-position: left 5% bottom 0%;
    background-size: 150px auto;
    background-repeat: no-repeat;
}

.goodies {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    align-items: center;
    gap: 24px;
}

.goodies > div:first-of-type {
    grid-column: span 9;
}

.goodies > div:last-of-type {
    grid-column: span 3;
}

.goodies > div:first-of-type > div:last-of-type {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    align-items: center;
    gap: 24px;
}

.goodies > div:first-of-type > div:last-of-type > img {
    grid-column: span 3;
}

/* Solution */

.solution > div:first-of-type {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    align-items: center;
    gap: 24px;
}

.solution > div:first-of-type > img:first-of-type {
    grid-column: span 2;
}

.solution > div:first-of-type > div {
    grid-column: span 8;
}

.solution > div:first-of-type > img:last-of-type {
    grid-column: span 2;
}

.description > div > h2 {
    text-align: center;
}

.description > div > p {
    text-align: center;
}

.mockup-wrapper {
    position: relative;
    display: grid;
    grid-template-columns: 9fr 3fr;
    align-items: center;
    gap: 24px;
}

.application {
    width: 85%;
}

.website,
.application {
    position: relative;
    z-index: 2;
    pointer-events: none;
}

.video-desktop,
.video-mobile {
    position: absolute;
    z-index: 1;
    object-fit: cover;
}

.video-desktop {
    top: 6%;
    left: 8%;
    width: auto;
    height: 85%;
}

.video-mobile {
    top: 2.25%;
    right: 4.5%;
    width: 19%;
    height: 95.5%;
    border-radius: 12px;
}

/* Other section */

.other-project-section {
    background-image: url('../images/rock-en-seine/deco-three.webp');
    background-position: left 10% top 10%;
    background-size: 1000px auto;
    background-repeat: no-repeat;
}

/* RESPONSIVE */

@media (max-width: 960px) {
    .image-full-height > img {
        width: 90%;
    }

    .video-mobile {
    top: 2%;
    height: 96%;
    }

    .introduction-section,
    .goodies-section { 
        background-image: none;
    }

    .print-section {
        background-position: right 5% bottom 5%;
        background-size: 150px auto;
    }

    .other-project-section {
        background-size: 800px;
    }
}

@media (max-width: 720px) {
    .width {
        padding: 56px 12px;
    }
    
    .div-none-mobile {
        display: none;
    }

    .padding {
        padding-bottom: 56px;
    }

    .print-section, 
    .other-project-section{
        background-image: none;
    }

    .introduction,
    .print,
    .goodies,
    .solution > div:first-of-type {
        grid-template-columns: 1fr;
    }

    .intro-text {
        padding: 0px;
    }

    .print div:last-of-type > div:first-of-type {
        padding: 0px 56px 56px 56px;
    }

    .goodies > div:first-of-type > div:last-of-type {
        grid-template-columns: repeat(12, 1fr);
    }

    .goodies > div:first-of-type > div:last-of-type > img {
        grid-column: span 6;
    }
}

@media (max-width: 540px) {
    .width {
        padding: 40px 12px;
    }

    .padding {
        padding-bottom: 40px;
    }

    .print div:last-of-type > div:first-of-type {
        padding: 0px 16px 40px 16px;
    }
}

@media (max-width: 376px) {
    .width {
        padding: 24px 12px;
    }

    .intro-text {
        padding: 0px 0px 0px 0px;
    }

    .mockup-wrapper {
        grid-template-columns: 1fr;
        justify-items: center;
    }

    .video-desktop {
        top: 1.5%;
        left: 10%;
        width: auto;
        height: 21%;
    } 

    .video-mobile {
        top: 28%;
        right: 11.5%;
        width: auto;
        height: 71%;
        border-radius: 24px;
    }
}