@import url('https://fonts.googleapis.com/css2?family=Rokkitt&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
* {
    padding: 0;
    margin: 0;
}

h1, strong {
    font-family: 'Rokkitt', serif;
}

p {
    font-family: 'Roboto', sans-serif;
}

header {
    background-image: url("../images/bg_header.jpg");
    padding-bottom: 250px;
}

header nav p {
    height: 80px;
    font-size: 44px;
}

header .titre {
    margin-top: 200px;
}

header nav img {
    width: 200px;
}

header h1 {
    font-size: 4em;
}

header strong {
    font-size: 6em;
}

.button1 {
    background-color: rgb(48, 214, 214);
    padding: 10px;
    border: none;
}

.button2 {
    background-color: rgb(243, 34, 100);
    padding: 10px;
    border: none;
    color: white;
    font-size: 1.75em;
}

.navbar button {
    border: none;
    font-size: 2em;
}

.offcanvas-body {
    background-color: #383939;
    padding: 0;
    box-shadow: inset -6px 0 4px 2px rgb(39, 39, 39);
}

.nav-item {
    border-top: 0.4px solid rgb(85, 85, 85);
    border-bottom: 0.4px solid rgba(26, 25, 25, 0.2);
}

.section1, .section3 {
    color: rgb(82, 80, 80)
}

.section1 p {
    font-size: 1.2em;
}

.section2 {
    background-image: url("../images/bg_nuage.jpg");
    background-position: center;
}

.section2 article {
    width: 50%;
    background-color: rgba(111, 217, 255, 0.55);
    padding-bottom: 100px;
    color: white;
}

.section2 h2 {
    font-size: 2.8em;
}

.section2 p {
    font-size: 1.2em;
}

.section2_block {
    border: 1px solid white;
    width: 40%;
    height: 140%;
}

.section2_block>p:nth-child(1) {
    font-size: 1.6em;
}

.section2_block>p:nth-child(2) {
    font-size: 3em;
}

.section3_image {
    width: 40%;
}

.section3 img {
    width: 100%;
    object-fit: contain;
}

.section3 article {
    width: 60%;
}

.section3 h2 {
    font-size: 3em;;
}

.section3 p {
    font-size: 1.2em;
}

.section4 {
    background-image: url("../images/bg_appareil_photo.jpg");
    background-position: center;
    
}

.section4 article {
    width: 50%;
    background-color: rgba(111, 217, 255, 0.55);
    color: white;
}

.section5 {
    background-color: #dddddd;
}

.section6 img {
    width: 100px;
    height: auto;
}

.section7 {
    background-image: url("../images/bg_newsletter.jpg");
    background-color: rgba(43, 43, 43, 0.74);
    color: white;
}

.section7 article {
    width: 60%;
}

.section7 input {
    width: 50%;
    height: 50px;
    border: none;
    padding-left: 20px;
    font-size: 1.2em;
    color: rgb(121, 121, 121);
}

footer {
    color: white;
    background-color: #24323b;
}

footer span {
    color: rgb(58, 209, 255);
}

.grille {
    display: grid;
    grid-template-columns: 3;
    grid-template-rows: 6;
    height: 180vh;
    width: 80%;
}

.g1, .g2, .g3, .g4, .g5, .g6, .g7{
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.g1 {
    /* border: 1px solid black; */
    grid-column: 1 / 3;
    grid-row: 1 / 3;
    background-image: url("../images/300.jpeg");
}

.g2 {
    /* border: 1px solid rgb(255, 1, 1); */
    background-image: url("../images/776.jpeg");
    grid-column: 3 / 4;
    grid-row: 1 / 5;
}

.g3 {
    /* border: 1px solid rgb(0, 255, 38); */
    background-image: url("../images/800.jpeg");
    grid-column: 1 / 2;
    grid-row: 3 / 6;
}

.g4 {
    /* border: 1px solid rgb(55, 0, 255); */
    background-image: url("../images/400.jpeg");
    grid-column: 2 / 3;
    grid-row: 3 / 5;
}

.g5 {
    /* border: 1px solid rgb(217, 255, 0); */
    background-image: url("../images/2476.jpeg");
    grid-column: 2 / 3;
    grid-row: 5 / 6;
}

.g6 {
    /* border: 1px solid rgb(255, 0, 174); */
    background-image: url("../images/140.jpeg");
    grid-column: 1 / 3;
    grid-row: 6 / 7;
}

.g7 {
    /* border: 1px solid rgb(4, 247, 255); */
    background-image: url("../images/439.jpeg");
    grid-column: 3 / 4;
    grid-row: 5 / 7;
}

@media (max-width: 1199px) {

    .section2 article {
        width: 100%;
    }

    .section2_block {
        width: 70%;
    }

    .section3 article {
        width: 100%;
    }

    .section3_image {
        width: 100%;
    }

    .section4 article {
        width: 100%;
    }

    .section7 article {
        width: 100%;
    }

    .section7 input {
        width: 90%;
    }
}

@media (max-width: 991px) {
    header nav p {
        height: 60px;
        font-size: 34px;
    }

    header nav img {
        width: 150px;
    }

    .grille {
        display: grid;
        grid-template-columns: 1;
        grid-template-rows: 7;
        height: 180vh;
        width: 80%;       
    }

    .g1 {
        grid-column: 1 / 1;
        grid-row: 1 / 2;
    }
    
    .g2 {
        grid-column: 1 / 2;
        grid-row: 2 / 3;
    }
    
    .g3 {
        grid-column: 1 / 2;
        grid-row: 3 / 4;
    }
    
    .g4 {
        grid-column: 1 / 2;
        grid-row: 4 / 5;
    }
    
    .g5 {
        grid-column: 1 / 2;
        grid-row: 5 / 6;
    }
    
    .g6 {
        grid-column: 1 / 2;
        grid-row: 6 / 7;
    }
    
    .g7 {
        grid-column: 1 / 2;
        grid-row: 7 / 8;
    }
}

@media (max-width: 767px) {

    header {
        padding-bottom: 100px;
    }

    header .titre {
        margin-top: 100px;
        text-align: center;
    }

    header h1 {
        font-size: 3em;
    }

    header strong {
        font-size: 4em;
    }
}