body {
    display: grid;
    grid-template-areas:
        "header    header    header"
        "nav       nav       nav"
        "main       main      main"
        "footer    footer   footer"
        "rightsReserved    rightsReserved   rightsReserved";
    grid-template-columns: 33.3% 33.3% 33.3%;
    grid-template-rows: auto auto auto auto auto auto;

    &>header {
        grid-area: header;
        padding-top: 30px;
        padding-bottom: 20px;
    }

    &>nav {
        grid-area: nav;
        background-color: var(--couleurVerte);
    }


    &>main {
        grid-area: main;
        grid-template-areas:
            "textIntro textIntro textIntro"
            "form form form";
        grid-template-columns: 33.3% 33.3% 33.3%;
        grid-template-rows: auto auto;



        &>.textIntro {
            grid-area: textIntro;
            margin-top: 30px;
        }

        &>.form {
            grid-area: form;
            display: grid;
            grid-template-areas: "form1 form2";
            grid-template-columns: 50% 50%;
            grid-template-rows: auto;
            padding-bottom: 30px;

            &>.form1 {
                grid-area: form1;
                margin-top: 40px;
                margin-bottom: 30px;
                margin-left: 40px;
                margin-right: 40px;
            }

            &>.form2 {
                grid-area: form2;
                margin-left: 20px;
                margin-right: 20px;
            }
        }

    }


    & footer {
        grid-area: footer;

        display: grid;
        grid-template-areas:
            "hyperSocial hyperSocial hyperSocial"
            "contact     contact     contact";
        grid-template-columns: 40% 20% 40%;
        grid-template-rows: auto auto;


        &>.hyperSocial {
            grid-area: hyperSocial;
            padding: 30px;
        }

        &>.contact {
            grid-area: contact;
            background-color: var(--couleurVerte);
            display: grid;
            grid-template-areas:
                "submit  contactDetails socialmedia ";
            grid-template-columns: 40% 20% 40%;
            grid-template-rows: auto;
            padding-top: 40px;
            padding-bottom: 20px;


            &>.socialmedia {
                grid-area: socialmedia;
            }

            &>.contactDetails {
                grid-area: contactDetails;
                display: flex;
                flex-direction: column;
                gap: 10px;
            }

            &>.submit {
                grid-area: submit;
            }

        }
    }

    &>.rightsReserved {
        background-color: var(--couleurGris);
        grid-area: rightsReserved;
        padding: 15px;
        text-align: center;
    }
}

/*media @1920px-1200px*/
@media (min-width: 825px) and (max-width: 1200px) {
    body {
        background-color: var(--couleurGris);
        margin: 0;
        padding: 0;

        display: grid;
        grid-template-areas:
            "header    header"
            "nav       nav"
            "main     main"
            "footer footer"
            "rightsReserved  rightsReserved";
        grid-template-columns: 50% 50%;
        grid-template-rows: auto auto auto auto auto;

        &>header {
            grid-area: header;
        }

        &>nav {
            grid-area: nav;
            background-color: var(--couleurVerte);
        }

        &>main {
            grid-area: main;
            display: grid;
            grid-template-areas:
                "textIntro textIntro "
                "form form";
            grid-template-columns: 50% 50%;
            grid-template-rows: auto auto;

            &>.textIntro {
                grid-area: textIntro;
            }

            &>.form {
                grid-area: form;
                display: grid;
                grid-template-areas: "form1 form2";
                grid-template-columns: 65% 35%;
                grid-template-rows: auto;
                margin-top: 10px;

                >.form1 {
                    grid-area: form1;
                }

                >.form2 {
                    grid-area: form2;
                }
            }
        }

        & footer {
            grid-area: footer;

            display: grid;
            grid-template-areas:
                "hyperSocial hyperSocial hyperSocial"
                "contact contact contact";
            grid-template-columns: 33.3% 33.3% 33.3%;
            grid-template-rows: auto auto;

            &>.hyperSocial {
                grid-area: hyperSocial;


            }

            &>.contact {
                grid-area: contact;

                display: grid;
                grid-template-areas:
                    "submit  contactDetails socialmedia ";
                grid-template-columns: 33.3% 33.3% 33.3%;
                grid-template-rows: auto;
                padding-top: 40px;
                padding-bottom: 20px;


                &>.socialmedia {
                    grid-area: socialmedia;
                }

                &>.contactDetails {
                    grid-area: contactDetails;
                    display: flex;
                    flex-direction: column;
                    gap: 30px;
                }

                &>.submit {
                    grid-area: submit;
                }

            }

        }


        &>.rightsReserved {
            grid-area: rightsReserved;
            padding: 15px;
            text-align: center;
        }
    }
}

/*media up to @825px**/
@media (max-width: 825px) {
    body {
        background-color: var(--couleurGris);
        margin: 0;
        padding: 0;
        display: grid;
        grid-template-areas:
            "header "
            "nav"
            "main"
            "footer"
            "rightsReserved";
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto auto auto;

        &>header {
            grid-area: header;
            padding-top: 30px;
            padding-bottom: 20px;
        }

        &>nav {
            grid-area: nav;
            background-color: var(--couleurVerte);
        }

        &>main {
            display: grid;
            grid-area: main;
            grid-template-areas:
                "textIntro"
                "form";
            grid-template-columns: 1fr;
            grid-template-rows: auto auto;


            &>.textIntro {
                grid-area: textIntro;
                padding-top: 30px;
                padding-left: 30px;
                padding-right: 30px;
            }

            &>.form {
                grid-area: form;
                display: grid;
                grid-template-areas:
                    "form2"
                    "form1";
                grid-template-columns: 100%;
                grid-template-rows: auto;

                >.form1 {
                    grid-area: form1;
                }

                >.form2 {
                    grid-area: form2;
                    margin-left: 35px;
                    margin-right: 35px;
                }
            }
        }


        & footer {
            grid-area: footer;
            display: grid;
            grid-template-areas:
                "hyperSocial "
                "contact";
            grid-template-columns: 1fr;
            grid-template-rows: auto auto;

            &>.hyperSocial {
                grid-area: hyperSocial;

            }

            &>.contact {
                grid-area: contact;
                display: grid;
                grid-template-areas:
                    "submit"
                    "contactDetails"
                    "socialmedia";
                grid-template-columns: 1fr;
                grid-template-rows: auto auto auto;
                padding-top: 40px;

                &>.submit {
                    grid-area: submit;
                    margin-bottom: 40px;
                }

                &>.contactDetails {
                    grid-area: contactDetails;
                    margin-bottom: 40px;
                }

                &>.socialmedia {
                    grid-area: socialmedia;
                    margin-bottom: 20px;
                }


            }

        }

        &>.rightsReserved {
            grid-area: rightsReserved;
            padding: 15px;
            text-align: center;
        }
    }
}